<p class="flash btn2"><a>発光するボタン</a></p>
.btn2 a {
background-color: #20b2aa;
color: #fff;
text-decoration:none;
}
.btn2 a:hover {
background-color: #20b2aa;
-webkit-animation: flash 1s;
animation: flash 1s;
text-decoration:none;
}
.btn2 a:active {
color: #ddd;
background-color: #12978d;
transition-duration: 0.1s;
text-decoration:none;
}
@-webkit-keyframes flash {
0% { background-color: #20b2aa; }
10% { background-color: #96e9e6; }
100% { background-color: #20b2aa; }
}
@keyframes flash {
0% { background-color: #20b2aa; }
10% { background-color: #96e9e6; }
100% { background-color: #20b2aa; }
}
結果
発光するボタン