CSS 를 이용한 버튼과 링크를 꾸미는 예제

링크와 버튼의 스타일에 일관된 느낌을 갖도록 하는 스타일 시트 작성법.

 

아래의 예제로 각각의 스타일에 대한 확인.

 

<style type="text/css">
 .button, button{
  font-weight:bold;
  background-color:#A69520;
  text-transform: uppercase;
  font-family:verdana;
  border:1px solid #444;
 
  /*글자의 크기와 위아래 여백을 같게*/
  font-size:1.2em;
  line-height:1.25em;
  padding:6px 20px;

  /*버튼에 링크와 동일하게 손모양의 커서로 변경시킴과 동시에 링크의 기본 밑줄 제거*/
  cursor:pointer;
  color:#000;
  text-decoration:none;

  /*모서리를 둥글게 한다.*/
  border-radius:12px;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;

  /*버튼에 그림자를 설정*/
  box-shadow:1px 3px 5px #555;
  -webkit-box-shadow:1px 3px 5px #555;
  -moz-box-shadow:1px 3px 5px #555;
  
  /*그라디언트의 추가
  background: -webkit-gradient(linear,0 0,0 100%, from(#FFF089), to(#A69520));
  background: -moz-linear-gradient(#FFF089,#A69520);
  background: -o-linear-gradient(#FFF089,#A69520);
  background: linear-gradient(top center, #FFF089,#A69520);
  */
  
  /* 그라디언트의 경우 조금더 상세히 적용하는것이 좋다.
   위의경우 ie 에서는 제대로 그라디언트가 되지 않는 부분이 있다.
  */
  /*background: url(오래된 버전의 경우 이미지) repeat-x left top #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /*Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 );!important /* IE6-9 */
 

 }
 /*버튼의 경우 링크보다 line-height 엘리먼트가 더 크다.
 아래의 경우 브라우저에서 확대해 일일이 비교하면서 크기가 같아질때까지 조절해야한다.*/
 input.button, button{
  line-height:1.22em;
 }

 /*버튼이 눌린느낌을 주는 효과 다양한 브라우저에서 같은 효과가 나타나게 하는 가장 효과적인 방법은
 각 색깔을 바꿔치기 하는 것이다.*/
 .button:active, .button:focus, button:active, button:focus{
  color:#000;
  background: -webkit-gradient(linear,0 0,100% 0, from(#A69520), to(#FFF089));
  background: -moz-linear-gradient(#A69520, #FFF089);
  background: -o-linear-gradient(#A69520, #FFF089);
  background: linear-gradient(top center, #A69520, #FFF089);
 }

</style>

<div>
 <a href="http://www.daum.net" class="button">daum</a>
 <input type="button" value="DAUM" class="button" />
 <button>Daum</button>
</div>