《CSS》グラデーションがスライドするhoverエフェクトをつくる

公開日：2025年04月14日　最終更新日：2025年4月15日

CSS

ボタンの背景グラデーションをhover時にスライドさせて滑らかに動いているように見せます。

DEMO

グラデーションボタン

HTML

<a class="button" href="#">グラデーションボタン</a>

CSS

linear-gradientにグラデーションを用意しておき、hover時にbackground-positionを変更します。

.button {
	background: linear-gradient(270deg, #cf5747, #e8bd20, #cf5747) 0 50% / 300% 100%;
	border-radius: 40px;
	color: #fff;
	display: inline-block;
	overflow: hidden;
	padding: 20px;
	position: relative;
	text-decoration: none;
	transition: all .5s ease;
}
.button:hover {
	background-position: 100% 50%;
	color: #fff;
}

Ad