色々なボタン(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" />