WEB屋になる為の知識と技術と情報(WEBデザイナーブログ)

今までのCSS(スタイルシート)では、光るボタンなどを画像やJavaScriptで配置していましたが、CSS3になりスタイルシートで一瞬グラデーションに光るボタンを設定出来るようになりました。
CSS3(スタイルシート)で出来る、一瞬グラデーションに光るボタンの設定方法をご紹介いたします。

一瞬グラデーションに光るボタン

【一瞬グラデーションに光るボタン】

.botan02 {
	display: block;
	cursor: pointer;
	width: 150px;
	margin: 0 auto;
	padding: 15px;
	text-align: center;
	text-decoration: none;
	border-radius:12px;
	box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px;
	-moz-box-shadow:rgba(113, 135, 164, 0.54) 4px 6px 5px 2px;
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	background-color:#00d889;
}
.botan02 a{
	color: #fff;
}
.botan02:hover {
	animation: gradation 1s;
}
@keyframes gradation {
	0% { background-color:#d3ea12; }
	100% { background-color: #F66; }
}

以上がCSSで一瞬グラデーションに光るボタンの設定方法が完了です。