CSS만으로 만드는 모서리가 둥근 버튼

이 박스를 라운드로 보이게 하려면  Firefox, Safari/Chrome, Opera,  IE9를 이용하여 보셔야 합니다.

button_test.html

http://www.cre8ivecommando.com/how-to-create-css-only-buttons-9243/

이건 HTML 부분에 들어가는 부분으로 그냥 링크만 거시면 됩니다.

<a href="#"  class="btn"><span>I'm a Button!</span></a>


이부분은 CSS로  head 부분이나 external css 화일에 삽입하시면 됩니다.
<style>

/* Button */
a.btn{text-decoration:none; border:#BBB 1px solid; color:#5f5e5e; display:block; float:left; padding:12px 15px; margin-right:10px; cursor:pointer;}
a:hover.btn{text-decoration:none; background:#FFF;}

/* Rounded Corners */
.rounded, a.btn{
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius: 6px;
}
 
/* Drop Shadow */
.shadow, a.btn{
-moz-box-shadow: 0px 1px 3px #AAA;
-webkit-box-shadow: 0px 1px 3px #AAA;
box-shadow: 0px 1px 3px #AAA;
}

/* Default Grey Gradient */
.gradient, a.btn{
background: #FFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #DDD); /* for firefox 3.6+ */
}
</style>