Membuat Efek Hover pada Tombol dengan CSS Variabel

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Membuat Efek Hover pada Tombol dengan CSS Variabel. Saya membuat artikel  ini karena saya terinspirasi oleh animasi animasi yang ada pada di situs web Grover. Menggerakkan mouse Anda di atas tombol button yang akan menampilkan gradien warna-warni yang mengikuti kursor Anda saat bergerak. Idenya sederhana, tetapi hasilnya adalah tombol yang mempunyai banyak variasi warna dari reset dan menunggu untuk diklik.

Bagaimana saya dapat membuat animasi tersebut, caranya cukup mudah sekali, silahkan teman simak di bawah ini;

Pengecekan posisi Mouse

Hal pertama yang kita butuhkan adalah posisi mouse.

document.querySelector('.button').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
 
}

1. Pilih elemen dan tunggu sampai pengguna menggerakkan mouse-nya melewatinya
2. Hitung posisi relatif terhadap elemen
3. Simpan koordinat dalam variabel CSS

Fungsi di atas digunakan untuk mengenali mouse atau pergerakan mouse.  Sekarang kita akan membuat animasi dari css.

Animasikan gradien

Saya sekarang memiliki koordinat yang disimpan dalam variabel CSS dan  dapat digunakan dimana aja.

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;

    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}

css di atas digunakan untuk membuat animasi.
Mulai dengan lebar dan tinggi 0px dan bawa hingga 400px saat pengguna mengarahkan tombol. Dan jangan lupa untuk mengatur transisi agar muncul dengan halus
Gunakan koordinat untuk mengikuti mouse
Terapkan radial-gradien ke latar belakang dan gunakan lingkaran sisi terdekat.

Hasil

Oke itulah tadi pembahasan saya tentang Membuat Efek Hover pada Tombol dengan CSS Variabel , semoga bermanfaat.