• このエントリーをはてなブックマークに追加

inputなどのボタンをHTML+CSSを使って表現する・カスタマイズする方法・サンプルコード

inputなどのボタン。フォームなどに一つは使う。よく見かけるパーツであるが、色を付けたい、角丸にしたいなど細かいところを指定しないときれいに作れない。結構面倒。

コピペして自分を含めて誰かが楽できればいいんやけど。コピー・アンド・ペースト用のサンプルいくつか準備しましたので使えたら使ってください。

リセット

#contact form .btn-submit input{
	border:none;
	padding:0;
	color: #fff;
	background: #666;
}

単色

#contact form .btn-submit input{
	display: block;
	margin: 0 auto;
	width: 10em;
	border:none;
	border-radius:0.5em;
	padding: 1em 0;
	text-align: center;
	color: #fff;
	background: #c00;
}

グラデーションのみ

#contact form .btn-submit input{
	display: block;
	margin: 0 auto;
	width: 10em;
	border:none;
	border-radius:0.5em;
	padding: 1em 0;
	text-align: center;
	color: #fff;
	background: linear-gradient( #f00, #c00);
}

グラデーションと矢印の組み合わせ

#contact form .btn-submit input{
	display: block;
	margin: 0 auto;
	width: 10em;
	border:none;
	border-radius:0.5em;
	padding: 1em 0;
	text-align: center;
	color: #fff;
	background: url(images/icon-arr-btn.png) no-repeat 100% 50%, linear-gradient( #f00, #c00);
	background-size: 1vw, cover;
}

Rose WangによるPixabayからの画像