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

公開日：2023年09月19日　最終更新日：2025年4月24日

CSS

CSSで左から光がキラッと流れるボタンアニメーションを作成します。
目立たせたいボタンがあるときに効果的です。

DEMO

キラッと光るボタン

HTML

<a class="button" href="#">キラッと光るボタン</a>

CSS

.button {
	background: #111;
	border-radius: 40px;
	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) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
.button:hover {
	color: #fff;
}
@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

Ad