《CSS》キラッと光るボタンアニメーション
公開日:2023年09月19日 最終更新日:2024年12月10日
左から光がキラッと流れるボタンのサンプルです。
目立たせたいボタンがあるときに使えます。
DEMO
キラッと光るボタンHTML
<a class="button" href="#">キラッと光るボタン</a>
CSS
.button {
background: #111;
color: #fff;
display: inline-block;
overflow: hidden;
padding: 20px;
position: relative;
text-decoration: none;
}
.button::after {
animation: 4s 0s shine linear infinite;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 100%);
content: '';
height: 100%;
left: -100%;
position: absolute;
top: 0;
transform: skewX(-25deg);
width: 50%;
}
@keyframes shine {
20% {
left: 150%;
}
100% {
left: 150%;
}
}