Gradient Shift Button

쉬움

호버 시 그라디언트가 이동하는 버튼

#hover#css-only#gradient

라이브 데모

코드

buttons.css

.gradient-shift-button {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink));
  background-size: 200% 100%;
  transition: background-position 0.4s ease;
}
.gradient-shift-button:hover {
  background-position: 100% 0;
}