[HTML/CSS]青色グラデーションのボタンのソースコード（aタグ、inputタグ共通）

選択

aタグに指定
<a href="#" class="selectBtn">選択</a>
inputタグに指定
<form action="#">
<input class="selectBtn" name="input" type="submit" value="選択" />
</form>

aタグに指定

inputタグに指定

</form>

/*
選択ボタン
デザイン上青色グラデーションのボタン
*/
.selectBtn, a.selectBtn {
	display: inline-block;
	cursor: pointer;
	background: #0058D4;
	background: -moz-linear-gradient(#639FE8, #0058D4);
	background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));
	border: none;
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	text-align: center;
	line-height: 100%;
	padding: 18px 0px 16px;
	width: 7em;
}
.selectBtnKanri:hover, a.selectBtnKanri:hover {
	background: #3280E2;
	background: -moz-linear-gradient(#94BDEF, #3280E2);
	background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));
	text-decoration: none;
}

選択ボタン

デザイン上青色グラデーションのボタン

.selectBtn, a.selectBtn {

display: inline-block;

cursor: pointer;

background: #0058D4;

background: -moz-linear-gradient(#639FE8, #0058D4);

background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4));

border: none;

color: #FFF;

font-weight: 400;

font-size: 16px;

font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳＰゴシック", "MS PGothic", Sans-Serif;

text-align: center;

line-height: 100%;

padding: 18px 0px 16px;

width: 7em;

}

.selectBtnKanri:hover, a.selectBtnKanri:hover {

background: #3280E2;

background: -moz-linear-gradient(#94BDEF, #3280E2);

background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2));

text-decoration: none;

}

この記事を書いた人

yellow

パズルファクトリー制作ノート

[HTML/CSS]青色グラデーションのボタンのソースコード（aタグ、inputタグ共通）

この記事を書いた人

新着記事

Practice is better than precept.