Butang Gradient CSS

Butang gradient dengan peralihan hover yang lancar, cincin fokus papan kekunci yang jelas dan sokongan reduced motion — CSS sahaja.

Pratonton langsung Buka dalam Playground

button.css

.btn-gradient {
  --btn-from: #6d28d9; /* violet */
  --btn-to: #be185d;   /* deep pink */

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0.75rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  cursor: pointer;

  /* Twice as wide as the button, so we can slide it */
  background-image: linear-gradient(120deg, var(--btn-from), var(--btn-to), var(--btn-from));
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease, transform 0.15s ease;
}

.btn-gradient:hover {
  background-position: 100% 50%;
}

.btn-gradient:active {
  transform: translateY(1px);
}

.btn-gradient:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

.btn-gradient:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .btn-gradient {
    transition: none;
  }
}

Pelayar tak boleh animasikan peralihan antara dua gradient background-image — ia terus bertukar. Caranya ialah jadikan gradient lebih lebar daripada butang (background-size: 200%) dan animasikan kedudukannya, yang memang boleh dianimasikan.

Kenapa setiap bahagian ada

Gradient bergerak from → to → from, jadi bila digeser dari 0% ke 100% warnanya berubah dengan lancar dan berakhir pada warna yang sepadan — tiada sisi tajam.
font: inherit elakkan butang guna fon lalai pelayar (yang selalunya lebih kecil).
:focus-visible paparkan outline yang jelas untuk pengguna papan kekunci tanpa muncul setiap kali klik tetikus. Jangan buang gaya fokus tanpa gantikannya.
Kedua-dua warna gradient mengekalkan nisbah kontras teks putih melebihi 4.5:1, iaitu minimum WCAG AA untuk teks biasa. Semak semula jika anda tukar warna.
prefers-reduced-motion: reduce matikan transition untuk pengguna yang set sistem operasi mereka supaya kurangkan pergerakan. Warna masih berubah — cuma tak menggelongsor.

Guna <button> sebenar untuk tindakan dan <a href> untuk navigasi. Kelas ini boleh digunakan pada kedua-duanya.

Cara guna

HTML

<button class="btn-gradient" type="button">Get started</button>

<!-- Different colours for one button -->
<a class="btn-gradient" href="/pricing" style="--btn-from: #0369a1; --btn-to: #4338ca;">
  See pricing
</a>