Rev. 2.73

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

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

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

.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속성으로 그라디언트 효과를 만들어 내고 있습니다.

Rectangle or Rounded Can be Medium or Small

Span
Div

P Tag

H3

Gray Rounded Medium Small

Span
Div

P Tag

H3

White Rounded Medium Small

Span
Div

P Tag

H3

Orange Rounded Medium Small

Span
Div

P Tag

H3

Red Rounded Medium Small

Span
Div

P Tag

H3

Blue Rounded Medium Small

Span
Div

P Tag

H3

Rosy Rounded Medium Small

Span
Div

P Tag

H3

Green Rounded Medium Small

Span
Div

P Tag

H3

Pink Rounded Medium Small

Span
Div

P Tag

H3

CSS3 Gradient Buttons by Web Designer Wall

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar