ホームページ >ウェブフロントエンド >htmlチュートリアル >5 つの美しい CSS ボタン_html/css_WEB-ITnose
次のボタンはボタン CSS ジェネレーターによって生成されます: http://buttoncssgenerator.com/ で、すべての主要な主流ブラウザーをサポートします。
1. ダークブルーのプロフェッショナルでエレガントな (影付き)
html: <a href='#' class='className'>css</a> css: .className{ line-height:46px; height:46px; width:154px; color:#ffffff; font-size:20px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #599bb3), color-stop(1, #408c99)); background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%); background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%); background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0); border:0px solid #dcdcdc; -webkit-border-top-left-radius:8px; -moz-border-radius-topleft:8px; border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topright:8px; border-top-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomleft:8px; border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; -moz-border-radius-bottomright:8px; border-bottom-right-radius:8px; -moz-box-shadow:0px 10px 14px -7px #276873; -webkit-box-shadow:0px 10px 14px -7px #276873; box-shadow:0px 10px 14px -7px #276873; text-align:center; display:inline-block; text-decoration:none; } .className:hover { background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #408c99), color-stop(1, #599bb3)); background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%); background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%); background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0); }
2. 水色
rree
.className{ line-height:30px; height:30px; width:80px; color:#ffffff; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5)); background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0); border:1px solid #84bbf3; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7; box-shadow: inset 0px 1px 0px 0px #bbdaf7; text-align:center; display:inline-block; text-decoration:none; } .className:hover { background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #378de5), color-stop(1, #79bbff)); background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%); background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0); }
3. オレンジ
rree
rree
4. グレー立体感
5. 緑の弧
.className{
line-height:50px;
高さ:50ピクセル;
幅:110ピクセル; #ffffff;
フォントサイズ:#44c767;
フォントファミリー:Arial;
-webkit-border-top-left-半径:28px;
ボーダー上左半径:28px;
-moz-border-radius-topright :28px;
ボーダー右上半径:28px;
ボーダー左下半径:28px; ;
-webkit-border-bottom-right-radius:28px;
border-bottom-right-radius:28px; 0px #ffffff;
-webkit-box-shadow: インセット 0px 0px 0px #ffffff;
text-align:center
text-装飾:なし;
}
.className:hover {
背景色:#5cbf2a;
.className{ line-height:29px; height:29px; width:100px; color:#333333; font-size:15px; font-weight:bold; font-family:Arial; background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffec64), color-stop(1, #ffab23)); background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); border:1px solid #ffaa22; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -moz-box-shadow: inset 0px 1px 0px 0px #fff6af; -webkit-box-shadow: inset 0px 1px 0px 0px #fff6af; box-shadow: inset 0px 1px 0px 0px #fff6af; text-align:center; display:inline-block; text-decoration:none; } .className:hover { background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffab23), color-stop(1, #ffec64)); background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%); background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%); background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0); }