《CSS》キラッと光るボタンアニメーション

公開日：2023年09月19日　最終更新日：2024年2月27日

CSS

左から光がキラッと流れるボタンのサンプルです。
目立たせたいボタンがあるときに使えます。

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%;
	}
}