Css Button Transition

Hi web developer! kesempatan kali ini saya mau buat tutorial gimana cara buat button dikala ada mouse hover warnanya sanggup berubah perlahan. Makara ada animasinya sedikit. kurang lebih tampilanya kayak gini.

Google

Pertama-tama buatlah struktur sederhana dari tag link.

      <a id='cssbtn' href='https://www.google.com'>Google</a>

Jangan lupa untuk menambahkan id pada button biar kita sanggup memakai css.
Buatlah style css sederhana untuk menciptakan sebuah button.

      <style>
      #cssbtn{
      padding:15px;
      border-radius:10px;
      background-color:orange;
      color:white;
      cursor:pointer;
      }
      </style>

Buatlah style dikala terdapat mouse hover ke button tersebut

      <style>
      #cssbtn:hover{
      background-color:#4a4a4a;
      }
      </style>

Tambahkan transition di button biasa dan hover. Ini akan menciptakan transisi dikala mouse hover maupun sebaliknya dikala meninggalkan button.

      <style>
      #cssbtn{
      padding:15px;
      border-radius:10px;
      background-color:orange;
      color:white;
      cursor:pointer;
      transition:0.5s;
      }
     
      #cssbtn:hover{
      background-color:#4a4a4a;
      transition:0.5s;
      }
      </style>

CSS Transition berfungsi untuk menciptakan animasi dari perbedaan attribute yang ada. Kalian sanggup mencobanya sendiri dengan attribute lain mulai dari width, padding, margin, border-radius, dan lainnya.

      Penjelasan Kode:
      padding Jarak dari border kedalam button
      border-radius Membuat Button menjadi lebih
      bundar (corner roundness)
      background-color Warna dari button
      color Warna tulisan
      cursor Mengubah kursor menjadi mode
      pointer (siap klik)