CSS만을 이용한 버튼과 백그라운드 이미지를 버튼 길이의 확장성을 고려하여 제작한
예제를 소개 합니다.
CSS만을 이용한 버튼
| Button | class="" | Description |
|---|---|---|
| btn | 기본 버튼으로 과 사용시엔 의미로 사용하면 적절하다. | |
| btn confirm | 파란색 톤의 컬러는 확인, 적용 행동에 사용됩니다. | |
| btn info | 제공된 정보를 선택적으로 사용자에게 노출시킬때 사용됩니다. | |
| btn warning | 주황색은 경고성 동작임을 알리는데 사용됩니다. | |
| btn danger | 붉은색은 위험성 있고 혹은 되돌릴 수 없는 동작에 사용됩니다. |
CSS3가 나오기 전에는 대부분의 버튼들은 백그라운드 이미지를 사용해서 표현하였으나, 최근에는 CSS3의 지원이 확장되어 CSS만으로 입체감 있는 깔끔한 표현이 가능하고,
정적 컨텐츠의 리퀘스트도 줄일 수 있어서 이미지의 많은 부분은 CSS가 대체 하고 있습니다.
CSS3 속성을 이용하여 버튼을 제작할 때 유의할 점은 CSS3를 제한적으로 지원하는 또는 지원하지 않는 브라우저(IE8이하)에서도
시각적인 부분과 동작상에 문제가 되지 않도록 제작하는게 중요합니다!
HTML
Confirm
위에 나열한 class를 기재하여 미리 선언해둔 버튼스타일을 적용 할 수 있습니다.
CSS
.btn {
padding: 3px 5px; background: #f5f5f5; border: solid 1px #b3b3b3; font-size: 11px; border-radius: 4px; cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-decoration: none;
}
.btn:hover { background-image: none !important; }
.btn.confirm {
background-color: #0074CC; *background-color: #0055cc;
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn.confirm:hover { background-color: #0055CC; }
.btn.info {
background-color: #49AFCD; *background-color: #2f96b4;
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn.info:hover { background-color: #2F96B4; }
.btn.success {
background-color: #5bb75b; *background-color: #51a351;
background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn.success:hover { background-color: #51A351; }
.btn.warning {
background-color: #faa732; *background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn.warning:hover { background-color: #F89406; }
.btn.danger {
background-color: #da4f49; *background-color: #bd362f;
background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn.danger:hover { background-color: #BD362F; }
.btn.confirm, .btn.info, .btn.success, .btn.warning, .btn.danger { color: #fff; }
백그라운드 이미지를 적용한 버튼
버튼에 백그라운드 이미지를 적용할 시, 텍스트가 길이에 대한 확장성을 고려하여 제작 하여야 합니다.
Medium size
Large size
HTML
CSS
/*
* Button
*/
.button,
.button * {
position: relative; margin: 0; padding: 0; display: inline-block;
text-decoration: none; border:0; font-size: 12px; white-space: nowrap;
overflow: visible; font-weight: bold; vertical-align: top; color: #fff;
background: url(../img/ui/buttons.gif) no-repeat;
}
.button { margin-right: 4px; }
.button *{ left: 4px; cursor: pointer; _cursor:hand; }
/* medium size */
.button.medium-blue, .button.medium-blue *,
.button.medium-green, .button.medium-green *,
.button.medium-gray, .button.medium-gray * { height: 26px; line-height: 26px; }
.button.medium-blue { background-position: left -160px; }
.button.medium-green { background-position: left -198px; }
.button.medium-gray { background-position: left -234px; }
.button.medium-blue *{ padding: 0 14px 0 12px; background-position: right -160px; }
.button.medium-green *{ padding: 0 14px 0 12px; background-position: right -198px; }
.button.medium-gray *{ padding: 0 14px 0 12px; background-position: right -234px; }
/* large size */
.button.large-blue, .button.large-blue *,
.button.large-green, .button.large-green *,
.button.large-gray, .button.large-gray * { height: 46px; line-height: 43px; font-size: 14px; }
.button.large-blue { background-position: left top; }
.button.large-green { background-position: left -51px; }
.button.large-gray { background-position: left -102px; }
.button.large-blue * { padding: 0 22px 0 18px; background-position: right top; }
.button.large-green *{ padding: 0 22px 0 18px; background-position: right -51px; }
.button.large-gray * { padding: 0 22px 0 18px; background-position: right -102px; }
History
- CSS만을 이용한 버튼 예제 작성[박정식 | 2012.04.24]
- 백그라운드 이미지를 적용한 버튼 예제 작성[박정식 | 2012.02.01]