Firejune

Web Designer Wall의 Nick La씨는 div, span, p, a, button, input 등 다양한 HTML 요소에 적용이 가능한 예쁜 그라디언트 버튼을 CSS3를 이용하여 만드는 방법에 대하여 포스팅했습니다. 이미지나 자바스크립트를 사용하지 않았으며, font-size와 padding속성의 값을 조절하여 쉽게 변경할 수 있습니다.

CSS3를 사용하기 때문에 CSS3를 지원하지 않는 브라우저인 인터넷 익스플로러에서는 모양이 다르게 나타납니다.

또한 버튼의 마우스 오버, 활성화 효과도 구현되어 있습니다. 그리고 그라디언트 외에도 박스 그림자, 문자 그림자, 둥근 모서리 효과도 함께 적용되어 있습니다.

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}

.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

일반적으로 위와 같은 스타일이 적용되어 있으며 적용된 결과는 다음과 같습니다. CSS3를 지원하지 않는 IE의 경우 filter속성으로 그라디언트 효과를 만들어 내고 있습니다.

CSS3 Gradient Buttons by Web Designer Wall