이미지를 이용한 버튼 타입 모음

확장성 버튼형 이미지

웹 기술이 발전함에 따라 CSS3를 이용하여 둥근모서리 타입의 디자인 버튼을 만들기가 보다 수월해졌습니다.

하지만 아직 우리나라에서는 하위 호환성을 이유로 크로스브라우징 작업을 할 수 밖에 없는 상황이 종종 있습니다.

요즘은 많이 사용하고 있진 않지만 텍스트 길이에 상관없이 확장성있게 둥근 모서리나 그라디언트 타입의 이미지 버튼을 만들어 보도록 하겠습니다.

a, button, input with Image

html

<h1>anchor 타입</h1>
<div class="btn-group">
	<a href="#none" class="btn-type-01">
		<span class="inner-bg">텍스트</span>
	</a> <br><br>
	<a href="#none" class="btn-type-01">
		<span class="inner-bg">텍스트를 포함한&nbsp;<i class="icon-type-04">오른쪽 화살표</i></span>
	</a> <br><br>
	<a href="#none" class="btn-type-01">
		<span class="inner-bg">텍스트를 포함한 a 타입 버튼</span>
	</a>
</div>

<h1>button 타입</h1>
<div class="btn-group">
	<button type="button" class="btn-type-01">
		<span class="inner-bg">텍스트&nbsp;<i class="icon-type-03">오른쪽 화살표</i></span>
	</button> <br><br>
	<button type="button" class="btn-type-01">
		<span class="inner-bg">텍스트를 포함한</span>
	</button> <br><br>
	<button type="button" class="btn-type-01">
		<span class="inner-bg">텍스트를 포함한 button 타입</span>
	</button>
</div>

<h1>input 타입</h1>
<div class="btn-group">
	<span class="btn-inp">
		<input type="button" value="텍스트" class="inp-bg">
	</span><br><br>
	<span class="btn-inp">
		<input type="button" value="텍스트를 포함한" class="inp-bg">
	</span><br><br>
	<span class="btn-inp">
		<input type="button" value="텍스트를 포함한 인풋타입 버튼" class="inp-bg">
	</span>
</div>
<div class="icon-group">
	<i class="icon-type-01">오른쪽 화살표</i>
	<i class="icon-type-02">왼쪽 초록 화살표</i>
	<i class="icon-type-03">오른쪽 초록 화살표</i>
	<i class="icon-type-04">달력 아이콘</i>
</div>

css

 * {
 	margin: 0;
 	padding: 0;
 	font-family: '돋움', Dotum;
 }
 
 body {
 	width: 500px;
 	margin: 40px auto;
 }
 
 h1 {
 	margin-bottom: 5px;
 }
 
 .btn-group {
 	margin-bottom: 40px;
 }
 
 .btn-type-01,
 .inner-bg {
 	/* 공통 속성값 지정 */
 	display: inline-block;
 	/* 인라인요소를 인라인블록 요소로 */
 	height: 30px;
 	/* 이미지 공간을 확보하기 위해 높이값 지정 */
 	position: relative;
 }
 
 a.btn-type-01,
 button.btn-type-01 {
 	border: 0;
 	/* button, input 요소 초기화 */
 	text-decoration: none;
 	/*a 요소 언더라인 제거 */
 	color: #fff;
 	/* 컬러 공통값 적용 */
 	cursor: pointer;
 }
 
 .btn-type-01 {
 	padding-left: 15px;
 	/* 왼쪽 둥근외곽 공간 확보 */
 	background: url(https://t1.daumcdn.net/cfile/tistory/235F04495791E0DD21) no-repeat;
 	/* !! 중요 !! */
 	/* 이미지 컷팅시 png 타입의 transparent 로 할 경우 반복되는 이미지로 인한 배경을 조심할 것 */
 }
 
 .inner-bg {
 	padding-right: 15px;
 	/* 오른쪽 둥근외곽 공간 확보 */
 	background: url(https://t1.daumcdn.net/cfile/tistory/277C21495791E0DE01) 100% 0;
 	/*
         btn_l.png 인 왼쪽이미지를 반복시킬경우 해당영역에서 background 단축속성을 사용할 경우에
         background-color 값을 지정안할 경우 transparent 이기 때문에 상위이미지가 비춰보일수 있으니 조심할 것
         */
 	line-height: 30px;
 	font-size: 12px;
 }
 
 .btn-inp {
 	position: relative;
 	display: inline-block;
 	height: 30px;
 	background: url(https://t1.daumcdn.net/cfile/tistory/235F04495791E0DD21) 0 0 no-repeat;
 	left: -4px;
 	margin-right: -2px;
 }
 
 .inp-bg {
 	position: relative;
 	left: 2px;
 	/*
        input 요소가 span 공간을 모두 덮고 있으므로 자신의 분신을 놔두고(position:relative 특성을 이용)
        좌측으로 부모공간의 bg를 확보하기 위해 좌축 이동
        */
 	border: 0;
 	display: inline-block;
 	height: 30px;
 	background: url('https://t1.daumcdn.net/cfile/tistory/277C21495791E0DE01') 100% 0 no-repeat;
 	padding: 0 15px;
 	color: #fff;
 }
 
 [class^="icon-type-"],
 [class*=" icon-type-"] {
 	position: relative;
 	top: -1px;
 	display: inline-block;
 	background: url("https://t1.daumcdn.net/cfile/tistory/245D50495791E0DE22") no-repeat 0 0;
 	vertical-align: middle;
 	zoom: 1;
 	overflow: hidden;
 	text-indent: -999em;
 }
 
 .icon-type-01 {
 	width: 6px;
 	height: 8px;
 }
 
 .icon-type-02 {
 	width: 4px;
 	height: 7px;
 	background-position: 0 -11px;
 }
 
 .icon-type-03 {
 	width: 4px;
 	height: 7px;
 	background-position: 0 -20px;
 }
 
 .icon-type-04 {
 	width: 21px;
 	height: 20px;
 	background-position: 0 -30px;
 }

See the Pen kXEqWz by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub