CSS 이미지 버튼 스타일

나는 버튼이 페이지의 중간에 중심으로하고 여기에 50 픽셀CSS 이미지 버튼 스타일

내가 무슨 짓을에 의해 분리되어이 enter image description here

뭔가를 달성하기 위해 노력하고있어.

HTML

<div class="btn btn_tours"><a href="maps.html">Maps</a><span></span></div> 
    <div class="btn btn_maps"><a href="dbtest.html">DB Test</a><span></span></div> 
    <div class="btn btn_locations"><a href="geolocation.html">Geolocation</a><span></span></div> 
    <div class="btn btn_directions"><a href="accel.html">Accelerometer</a><span></span></div>

CSS

.btn { 
    position: relative; 
    padding: 10px 10px 10px 10px; 
    cursor: pointer; 
    overflow: visible; 
    width:50px; 
    height: 50px; 
} 
.btn_directions{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;} 
.btn_maps{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; } 
.btn_tours{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;} 
.btn_locations{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; }

JSFIDDLE

출처

2011-09-29 raym0nd

"는

그것을 물을 수 없습니다 너무 늦었입니다." –

간단한 예 : http://jsfiddle.net/rgmCc/

출처

2011-09-29 20:55:14

버튼 내부의 이미지를 어떻게 스케일합니까? – raym0nd

배경 이미지의 크기를 조절할 수 없습니다 (CSS3에서만 지원) –

"이미지 편집기"(예 : Photoshop 또는 w/e)로 이미지를 열고 필요에 따라 이미지의 크기를 변경할 수 있습니다. – Andrej