CSS3ボタン コピー&ペーストで簡単に実装可能、リッチなボタンの作り方 – How to create buttons in CSS3
どうもこんばんは！今日は【コピー&ペーストで簡単に実装可能なボタンの作り方】について書きたいと思います。今更感もありますが…実際に使いこなせるととても便利なテクニックだと思います。CSS3に関しては、IEという難敵もいますのでそのフルポテンシャルは活かされません。ただプラウザの対応範囲も徐々に広がっているので、そろそろターニングポイントかなと思う今日この頃です。
CSS3ボタン – example1
背景に紙質を設定している場合に見栄えのするボタンスタイルです。汎用性も高く様々な場面で活躍してくれます。今回はon/off/hoverの状況に合わせてclassをかえていますのでカスタマイズしてご活用下さい。
<ul id="ex1">
<li><a href="" class="on">on</a></li>
<li><a href="" class="off">off</a></li>
<li><a href="" class="hover">hover</a></li>
</ul>
HTMLは上記のみを使用します。これ以降のデザインパターンはCSSで切り替えています。
#ex1 li a{
color: #555;
text-decoration:none;
text-align:center;
text-shadow: 0 1px 0 white;
height:20px;
line-height:20px;
padding:7px 12px 6px;
font-weight: bold;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}.off{
border: 1px solid;
border-color: #AAA #BBB #CCC;
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffCCC,EndColorStr=#ffe6e6e6);
background-image: -moz-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -o-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DDD),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: linear-gradient(to bottom,#DDD 0,#EEE 100%);
}
.on {
text-shadow: 0 1px 0 white;
border: 1px solid;
border-color: #CCC #CCC #AAA;
background-color: #E0E0E0;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px white;
box-shadow: inset 0 0 1px white;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffFAFAFA,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#FAFAFA 0,#dcdcdc 100%);}
.hover {
text-shadow: 0 1px 0 white;
border: 1px solid;
border-color: #CCC #CCC #AAA;
background-color: #E0E0E0;
-moz-box-shadow:0 0 4px #CCC;
-ms-box-shadow:0 0 4px #CCC;
-webkit-box-shadow:0 0 4px white;
box-shadow:0 0 4px #CCC;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffFAFAFA,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#EEE 0,#dcdcdc 100%);}
example2
#ex li a{
font-size: 12px;
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #7d0000;
text-decoration:none;
}.on{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}
.off{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:inset 0px 0px 13px rgba(18,18,18,0.7);
-webkit-box-shadow:inset 0px 0px 13px rgba(18,18,18,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}
.hover{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:0px 1px 10px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:0px 1px 10px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}
example3
#ex li a{
display: block;
text-align:center;
vertical-align: middle;
padding:8px 20px;
color: #060c17;
font-size:13px;
text-decoration:none;
font-weight:bold;
background: -moz-linear-gradient(top,#485f78 0%,#24394f);
background: -webkit-gradient(linear, left top, left bottom, from(#485f78),to(#24394f));
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #122129;
}.on{
-moz-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}
.off{
-moz-box-shadow:0px 0px 1px rgba(000,000,000,1),inset 0px 0px 9px rgba(20,19,20,1);
-webkit-box-shadow:0px 0px 1px rgba(000,000,000,1),inset 0px 0px 9px rgba(20,19,20,1);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}
.hover{
-moz-box-shadow:0px 1px 5px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 5px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}
example4
#ex li a{
color:#e4eef8;
background:#337fcc;
font-size:12px;
font-weight:bold;
text-align:center;
display:block;
text-decoration:none;
padding:10px 15px 8px 15px;
border:1px solid #225588;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}.on{
text-shadow:0 -1px 0px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}
.off{
opacity: 0.9;
-moz-opacity: 0.9;
filter:alpha(opacity=90);
text-shadow:0 -1px 0px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}
.hover{
text-shadow:0 -2px 1px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}
example5
#ex li a {
border-radius: 60px 60px 60px 60px;
display: block;
font-size: 20px;
font-weight: bold;
padding: 32px;
text-align: center;
text-decoration: none;
font-family: Impact;
}.on {
color: #5B992B;
background-color: #7FBF4D;
background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
border-color: #63A62F #63A62F #5B992B;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 0 #96CA6D inset;
box-shadow: 0 2px 8px 0 #888;
}
.off {
box-shadow:inset 0 2px 8px 0 #888;
color: #CCC;
}
example6
#ex li a{
font-family: Arial, Helvetica, sans-serif;text-decoration:none;font-size: 14px;color: #ffffff;padding: 10px 26px;
background: -moz-linear-gradient(top,#ff4040 0%,#f04d4d 50%,#f02d2d);
background: -webkit-gradient(linear, left top, left bottom, from(#ff4040),color-stop(0.50, #f04d4d),to(#f02d2d));
border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;
border: 0px solid #ffffff;text-shadow:0px -1px 0px rgba(042,012,097,0.4),0px 1px 0px rgba(255,255,255,0);display:block;margin:10px 0;
}
.on{
-moz-box-shadow:0px 5px 1px rgba(199,050,057,1);-webkit-box-shadow:0px 5px 1px rgba(199,050,057,1);
}
.off{
-moz-box-shadow:0px 2px 0px rgba(199,050,057,1),;-webkit-box-shadow:0px 2px 0px rgba(199,050,057,1);
}
.hover{
-moz-box-shadow:0px 4px 2px rgba(199,050,057,1);-webkit-box-shadow:0px 4px 2px rgba(199,050,057,1);
}
以上です。