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>
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;} }
こんな感じのボタンができたと思います!
gifで作ってもいいのですが、CSSなので色やサイズの変更がしやすいので便利だと思います。