[UI] UI Components : Buttons

ボタンいろいろ。フラット、フラット立体、グラデボタンで色違い。

DEMO

a - 1 2 3 4 5 6 7 8

buttonbuttonbuttonbuttonbuttonbuttonbuttonbutton

b - 1 2 3 4 5 6 7 8

buttonbuttonbuttonbuttonbuttonbuttonbuttonbutton

c - 1 2 3 4 5 6 7 8

buttonbuttonbuttonbuttonbuttonbuttonbuttonbutton

HTML

button

CSS

/* -------------------- buttons -------------------- */
/* 共通 */
.btn {
 margin:.5em;
}
.btn {
 display:inline-block;
 min-width:10em;
 line-height:1;
 padding:1em;
 border-radius: 4px;
 text-align:center;
 text-transform: capitalize;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 font-size:14px;
 font-weight:bold;
 color:#fff;
 text-decoration:none;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.btn:hover {
 color:#fff;
}
.btn:visited, .btn:active {
 color:#fff;
}
/* a-1 */
.btn-name1 {
 border:#D6D6D6 1px solid;
 background:#eee;
 color:#333;
}
.btn-name1:hover {
 border:#C1C1C1 1px solid;
 background:#D9D9D9;
 color:#333;
}
.btn-name1:visited, .btn-name1:active {
 color:#333;
}
/* a-2 */
.btn-name2 {
 border:#0E0E0E 1px solid;
 background:#2D2D2D;
}
.btn-name2:hover {
 border:#000 1px solid;
 background:#1F1F1F;
}
/* a-3 */
.btn-name3 {
 border:#1A86CE 1px solid;
 background:#3498DB;
}
.btn-name3:hover {
 border:#0F7CC4 1px solid;
 background:#258ACE;
}
/* a-4 */
.btn-name4 {
 border:#37374F 1px solid;
 background:#44445E;
}
.btn-name4:hover {
 border:#2E2E44 1px solid;
 background:#37374F;
}
/* a-5 */
.btn-name5 {
 border:#C10931 1px solid;
 background:#E00034;
}
.btn-name5:hover {
 border:#AD062B 1px solid;
 background:#C10931;
}
/* a-6 */
.btn-name6 {
 border:#E56510 1px solid;
 background:#F7761F;
}
.btn-name6:hover {
 border:#D65C0A 1px solid;
 background:#E56510;
}
/* a-7 */
.btn-name7 {
 border:#EABB00 1px solid;
 background:#FFCF00;
 color:#333;
}
.btn-name7:hover {
 border:#D3A900 1px solid;
 background:#EABB00;
 color:#333;
}
.btn-name7:visited, .btn-name7:active {
 color:#333;
}
/* a-8 */
.btn-name8 {
 border:#389138 1px solid;
 background:#47A447;
}
.btn-name8:hover {
 border:#2B7F2B 1px solid;
 background:#389138;
}
/* -------------------- buttons 3d -------------------- */
/* 共通 */
.btn-3d {
 border-width: 0 0 3px 0;
 border-style: solid;
}
/* b-1 */
.btn-nameB1 {
 border-color:#BCBCBC;
 background:#eee;
 color:#333;
}
.btn-nameB1:hover {
 background:#D9D9D9;
 color:#333;
}
.btn-nameB1:visited, .btn-nameB1:active {
 color:#333;
}
/* b-2 */
.btn-nameB2 {
 border-color:#0E0E0E;
 background:#2D2D2D;
}
.btn-nameB2:hover {
 background:#1F1F1F;
}
/* b-3 */
.btn-nameB3 {
 border-color:#157CC1;
 background:#3498DB;
}
.btn-nameB3:hover {
 background:#258ACE;
}
/* b-4 */
.btn-nameB4 {
 border-color:#2B2B3F;
 background:#44445E;
}
.btn-nameB4:hover {
 background:#37374F;
}
/* b-5 */
.btn-nameB5 {
 border-color:#AA0529;
 background:#E00034;
}
.btn-nameB5:hover {
 background:#C10931;
}
/* b-6 */
.btn-nameB6 {
 border-color:#C64F05;
 background:#F7761F;
}
.btn-nameB6:hover {
 background:#E56510;
}
/* b-7 */
.btn-nameB7 {
 border-color:#CC9F00;
 background:#FFCF00;
 color:#333;
}
.btn-nameB7:hover {
 background:#EABB00;
 color:#333;
}
.btn-nameB7:visited, .btn-nameB7:active {
 color:#333;
}
/* b-8 */
.btn-nameB8 {
 border-color:#2A7A2A;
 background:#47A447;
}
.btn-nameB8:hover {
 background:#389138;
}
/* -------------------- buttons grad -------------------- */
/* 共通 */
.btn-grad {
 box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
 -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
 transition: none;
 -webkit-transition: none;
}
/* c-1 */
.btn-nameC1 {
 border:#D6D6D6 1px solid;
 background:#eee;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #eee), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #eee);
 background: -o-linear-gradient(#fff, #eee);
 background: linear-gradient(#fff, #eee);
 color:#333;
}
.btn-nameC1:hover {
 background:#eee;
 color:#333;
}
.btn-nameC1:visited, .btn-nameC1:active {
 color:#333;
}
/* c-2 */
.btn-nameC2 {
 border:#0E0E0E 1px solid;
 background:#2D2D2D;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2D2D2D), color-stop(0.00, #454545));
 background: -webkit-linear-gradient(#454545, #2D2D2D);
 background: -o-linear-gradient(#454545, #2D2D2D);
 background: linear-gradient(#454545, #2D2D2D);
}
.btn-nameC2:hover {
 background:#2D2D2D;
}
/* c-3 */
.btn-nameC3 {
 border:#1A86CE 1px solid;
 background:#3498DB;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #1c81c4), color-stop(0.00, #3498DB));
 background: -webkit-linear-gradient(#3498DB, #1c81c4);
 background: -o-linear-gradient(#3498DB, #1c81c4);
 background: linear-gradient(#3498DB, #1c81c4);
}
.btn-nameC3:hover {
 background:#1c81c4;
}
/* c-4 */
.btn-nameC4 {
 border:#37374F 1px solid;
 background:#44445E;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #44445E), color-stop(0.00, #5a5a81));
 background: -webkit-linear-gradient(#5a5a81, #44445E);
 background: -o-linear-gradient(#5a5a81, #44445E);
 background: linear-gradient(#5a5a81, #44445E);
}
.btn-nameC4:hover {
 background:#44445E;
}
/* c-5 */
.btn-nameC5 {
 border:#C10931 1px solid;
 background:#E00034;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #b8002b), color-stop(0.00, #E00034));
 background: -webkit-linear-gradient(#E00034, #b8002b);
 background: -o-linear-gradient(#E00034, #b8002b);
 background: linear-gradient(#E00034, #b8002b);
}
.btn-nameC5:hover {
 background:#b8002b;
}
/* c-6 */
.btn-nameC6 {
 border:#E56510 1px solid;
 background:#f78436;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ed670c), color-stop(0.00, #f78436));
 background: -webkit-linear-gradient(#f78436, #ed670c);
 background: -o-linear-gradient(#f78436, #ed670c);
 background: linear-gradient(#f78436, #ed670c);
}
.btn-nameC6:hover {
 background:#ed670c;
}
/* c-7 */
.btn-nameC7 {
 border:#EABB00 1px solid;
 background:#FEFE00;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFCF00), color-stop(0.00, #FEFE00));
 background: -webkit-linear-gradient(#FEFE00, #FFCF00);
 background: -o-linear-gradient(#FEFE00, #FFCF00);
 background: linear-gradient(#FEFE00, #FFCF00);
 color:#333;
}
.btn-nameC7:hover {
 background:#FFCF00;
 color:#333;
}
.btn-nameC7:visited, .btn-nameC7:active {
 color:#333;
}
/* c-8 */
.btn-nameC8 {
 border:#389138 1px solid;
 background:#5CB85C;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #47A447), color-stop(0.00, #5CB85C));
 background: -webkit-linear-gradient(#5CB85C, #47A447);
 background: -o-linear-gradient(#5CB85C, #47A447);
 background: linear-gradient(#5CB85C, #47A447);
}
.btn-nameC8:hover {
 background:#47A447;
}

CSS対応状況

• CSS3 Border-radius
• CSS3 Box-sizing
• CSS3 Transitions
• CSS3 Box-shadow
• CSS Gradients