CSS3で点滅ボタンを作る方法

CSS3で点滅するボタンを作ってみたのでご紹介します。

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>CSS3で点滅ボタンを作る方法</title>
</head>
<body>
<a class="btn" href="#">CLICK</a>
</body>
</html>

CSS

a {
	display:block;
	text-decoration:none;
	margin:50px auto;
	width:150px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-family:Arial Black;
	font-size:20px;
	color:#FFFFFF;
	background-color:#FFC600;
	border-radius:5px;
}
a.btn {
	animation: blink 1s linear infinite normal;
	-webkit-animation: blink 1s linear infinite normal;
	-moz-animation: blink 1s linear infinite normal;
	-o-animation: blink 1s linear infinite normal;
}
a:hover {
	animation:none;
	-webkit-animation:none;
}
@keyframes blink{
	0% {background-color:#FFC600;}
	10% {background-color:#FDE8A1;}
	100% {background-color:#FFC600;}
}
@-webkit-keyframes blink{
	0% {background-color:#FFC600;}
	10% {background-color:#FDE8A1;}
	100% {background-color:#FFC600;}
}
@-moz-keyframes blink{
	0% {background-color:#FFC600;}
	10% {background-color:#FDE8A1;}
	100% {background-color:#FFC600;}
}
@-o-keyframes blink{
	0% {background-color:#FFC600;}
	10% {background-color:#FDE8A1;}
	100% {background-color:#FFC600;}
}

CLICK

こんな感じのボタンができたと思います！

gifで作ってもいいのですが、ＣＳＳなので色やサイズの変更がしやすいので便利だと思います。

ウェブテクメモ

HTML/CSSの小技を紹介していきます。

CSS3で点滅ボタンを作る方法