Membuat Text Hover Effect Menggunakan CSS
Membuat Text Hover Effect Menggunakan CSS – Pada artikel kali ini kita akan membahas bagaimana cara membuat text hover effect menggunakan CSS. Seperti biasa kita hanya akan menggunakan dua buah file yaitu index.html dan style.css. Simak artikel ini lebih lanjut untuk mengetahui bagaimana cara membuat text hover effect menggunakan CSS.
Daftar Isi
Kode pada file CSS
*{ margin: 0; padding: 0; box-sizing: inherit; } body{ font-family: cursive; } .container{ position: relative; height: 100vh; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } .word{ background-image: linear-gradient(#ff2f97, #ff2f97); background-repeat: no-repeat; background-size: 0% 100%; background-position-x: right; transition: background-size 500ms; font-size: 4rem; } .word:hover{ background-size: 100% 100%; background-position-x: left; }
Kode pada file HTML
<!DOCTYPE html> <html> <head> <TITLE>Text Hover Effect</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="word">Inpows</div> </div> </body> </html>
Hasil yang diperoleh
Ketika file index.html dibuka pada browser maka akan diperoleh hasil seperti dibawah ini.
Temukan source code CSS menarik lainnya hanya di Inpows.
Baca Juga
Membuat Icon Pulse Animation Menggunakan HTML dan CSS
Membuat Algoritma Insertion Sort di Kotlin
Membuat Algoritma Bubble Sort di Kotlin