|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
*このページは web-dou.com のアーカイブです。(2025年 サイト統合)
色々なボタン(BUTTON)のCSSサンプル
TOP > HTML・CSSサンプル >
色々なボタン(BUTTON)のCSSサンプル
色々なボタンのサンプル
通常のボタン
<input type="button" value="サンプルソースを表示" />
背景色をつけたボタン
.button1 {
background-color:#ddeeff;
}
.button1:hover {
color: #fff;
background-color:#cfcfcf;
}
<input type="button" value="サンプルソースを表示" class="button1" />
+マージン(ボックス外の余白)
.button2 {
background-color:#ddeeff;
margin:10px;
}
.button2:hover {
color: #fff;
background-color:#cfcfcf;
}
<input type="button" value="サンプルソースを表示" class="button2" />
+パディング(ボックス内の余白)
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
<input type="button" value="サンプルソースを表示" class="button3" />
+丸み
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1" />
+影
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow1 {
box-shadow:0px 0px 0px 6px #aedaf2;
-moz-box-shadow:0px 0px 0px 6px #aedaf2;
-webkit-box-shadow:0px 0px 0px 6px #aedaf2
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow1" />
+影(ぼかし)
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow2 {
box-shadow:0px 0px 3px 3px #aedaf2;
-moz-box-shadow:0px 0px 3px 3px #aedaf2;
-webkit-box-shadow:0px 0px 3px 3px #aedaf2;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow2" />
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow3 {
box-shadow:0px 0px 10px 3px #aedaf2;
-moz-box-shadow:0px 0px 10px 3px #aedaf2;
-webkit-box-shadow:0px 0px 10px 3px #aedaf2;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow3" />
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow4 {
box-shadow:0px 0px 10px 10px #aedaf2;
-moz-box-shadow:0px 0px 10px 10px #aedaf2;
-webkit-box-shadow:0px 0px 10px 10px #aedaf2;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow4" />
+影(位置)
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow5{
box-shadow:5px 0px 3px #aedaf2;
-moz-box-shadow:5px 0px 3px #aedaf2;
-webkit-box-shadow:5px 0px 3px #aedaf2;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow5" />
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow6{
box-shadow:0px 5px 3px #aedaf2;
-moz-box-shadow:0px 5px 3px #aedaf2;
-webkit-box-shadow:0px 5px 3px #aedaf2;
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow6" />
.button3 {
background-color:#ddeeff;
margin:10px;
padding:5px;
}
.button3:hover {
color: #fff;
background-color:#cfcfcf;
}
.button3:active {
color: #fff;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.shadow7{
box-shadow:5px 5px 3px #aedaf2;
-moz-box-shadow:5px 5px 3px #aedaf2;
-webkit-box-shadow:5px 5px 3px #aedaf2
}
<input type="button" value="サンプルソースを表示" class="button3 rad1 shadow7" />
グラデーション(線形)
.button {
margin:10px;padding:5px;
}
.button:hover {
text-shadow:0px 0px 5px #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.grad1 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #d5defc), color-stop(1.00, #616a90));
background: -webkit-linear-gradient(#d5defc, #616a90);
background: -moz-linear-gradient(#d5defc, #616a90);
background: -o-linear-gradient(#d5defc, #616a90);
background: -ms-linear-gradient(#d5defc, #616a90);
background: linear-gradient(#d5defc, #616a90);
}
<input type="button" value="サンプルソースを表示" class="button rad1 grad1" />
.button {
margin:10px;padding:5px;
}
.button:hover {
text-shadow:0px 0px 5px #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.grad2 {
-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db));
background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
}
<input type="button" value="サンプルソースを表示" class="button rad1 grad2" />
.button {
margin:10px;padding:5px;
}
.button:hover {
text-shadow:0px 0px 5px #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.grad5 {
background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
}
<input type="button" value="サンプルソースを表示" class="button rad1 grad5" />
グラデーション(円形)
.button {
margin:10px;padding:5px;
}
.button:hover {
text-shadow:0px 0px 5px #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.grad3 {
background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #1a62db), color-stop(0.50, #54a3ee), color-stop(0.50, #54a3ee), color-stop(0.00, #70b6f2));
background: -webkit-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
background: -moz-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
background: -o-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
background: -ms-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
background: radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
}
<input type="button" value="サンプルソースを表示" class="button rad1 grad3" />
グラデーション(虹色)
.button {
margin:10px;padding:5px;
}
.button:hover {
text-shadow:0px 0px 5px #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.rad1 {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.grad4 {
-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00));
background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
}
<input type="button" value="サンプルソースを表示" class="button rad1 grad4" />
Copyright(C) 2010 WEB道 All Rights Reserved. Last update 25/11/05 22:29
