Cara Membuat Efek Hover Pada Teks Dengan CSS3

Halo, ketemu lagi dengan saya 🙂 , baik kali ini akan saya bagikan tutorial yakni tutorial mengenai bagaimana Cara Membuat Efek Hover Pada Teks Dengan CSS3, Nah, kalian pasti sudah kenal yah dengan hover, dimana hover ini berfungsi untuk memberikan efek pada suatu element, baiklah langsung saja kita praktekan.

Pertama-tama kita akan buat struktur kode HTML seperti berikut ini.

<div class="anim-btn">
  <span class="s-anim-btn">
    Hallo Guys !
  </span>
  <span>
    Hai :)
  </span>
</div>

Nah, kalo sudah, sekarang kita akan desai dan akan kita buat efek hover nya dengan kode CSS3 berikut.

.anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}

.anim-btn, .s-anim-btn {
  transition: 0.3s;     
}

.anim-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.s-anim-btn{
  margin-top: 0em;   
}

.anim-btn:hover .s-anim-btn{
  margin-top: -4em;
}

Kalo sudah semua diketikan, simpan terlebih dahulu, kemudian coba jalankan di browser masing-masing dan lihat hasilnya.

Baik sampai disini tutorial mengenai bagaimana Cara Membuat Efek Hover Pada Teks Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂