Kumpulan Efek Underline Text Menggunakan CSS Pada Blog

anaksmanda.com - Beberapa blog sering menggunakan efek menarik, yang efeknya membuat situs "wah" di mata pengunjung, salah satunya adalah efek garis bawah pada link/teks saat kursor hover. Mungkin untuk efek CSS standar hanya ada garis bawah, tidak ada animasi yang ditampilkan, terlihat "kaku" dan kurang menarik. tetapi kali ini kita akan membuat efek tersebut menjadi lebih menarik menggunakan CSS.

Untuk membuat efek ini membutuhkan browser yang mendukung CSS3, dan untuk melakukan ini kita menggunakan kode :before atau :after dan menggunakan sedikit :hover untuk membuat animasi muncul ketika kursor menyentuh. Untuk membuat efek garis bawah dengan css ini, kita tidak menggunakan text-decoration: underline; tetapi menggunakan border-bottom dari yang terkecil (1px) hingga (3px) atau lebih dapat membuat ketebalan garis bawah di css terlihat lebih nyata.

Nah, untuk lebih memahami konsep efek Underline pada CSS3, mari kita praktikkan dan pahami contoh garis bawah/Underline pada css. Mari kita lihat contoh yang sering digunakan web dan blog untuk menggunakan garis bawah.

1. Underline Standar

Pada animasi Underline - Standar di css ini akan muncul garis bawah, yang sering digunakan oleh web dan blog dimana penggunaan garis bawah di css menggunakan hiasan teks: garis bawah; dan itu cukup biasa, karena kurang "wow" di mata pengunjung. Untuk membuat garis bawah seperti ini, kalian bisa menggunakan kode di bawah ini:

.standar-u {
text-decoration: none;
}
.standar-u:hover {
text-decoration: underline;
transition: 0.5s ease;
}

2. Underline - Top to Bottom

Pada Animasi Underline- Top to Bottom, konsepnya adalah "ketebalan batas", yang mana kita membuat ketebalan batas yang kecil terlebih dahulu dan kemudian mengambil yang lebih besar. Konsepnya adalah border-bottom: 0px solid transparent ke border-bottom: 3px solid #000 dan sedikit transisi untuk membuatnya lebih halus. Untuk memahami lebih baik, lihat kode di bawah ini.

.animasi-top-bottom {
text-decoration: none;
display: inline-block;
border-bottom: 0px solid transparent;
width: 210px;
transition: 0.5s ease;
height: 25px;
}
.animasi-top-bottom:hover {
border-bottom: 3px solid #16A085;
}

Kembali ke pembahasan awal untuk membuat efek yang lebih halus lagi, kita menggunakan metode after. Lihat kode nya di bawah ini:

.animasi-top-bottom {
display: inline-block;
}
.animasi-top-bottom:after {
content: '';
display: block;
height: 0;
width: 100%;
background: transparent;
transition: height .5s ease, background-color .5s ease;
}
.animasi-top-bottom:hover:after {
height: 3px;
background: #16A085;

3. Underline - Bottom to Top

Konsep untuk kode ini sama dengan Top to Botoom, hanya saja kita membuat posisi garis bawah menjadi absolute sehingga kita bisa menentukan posisinya, dalam hal ini kita definisikan di bawah (lower: 0). Dan untuk lebih memahaminya, mari kita lihat contoh di bawah ini.

.animasi-bottom-top {
display: inline-block;
position: relative;
}
.animasi-bottom-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 100%;
background: transparent;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.animasi-bottom-top:hover:after {
height: 3px;
background: #16A085;
}

4. Underline - Left to Right

Underline/Garis Bawah yang dimulai dari kiri dan menuju kekanan kita memerlukan transisi pada css kita, sehingga pergerakan arah dari kiri ke kanan lebih terlihat "halus". Coba kita tidak menggunakan transisi ini, mungkin agak "kaku" pergerakannya.

Untuk membuat efek ini adalah kita membuat panjang dari garis bawah adalah 0, setelah di hover kita buat lebarnya menjadi 100%. Untuk meletakkan Underline kita memerlukan posisi yang absolute pada after class yang kita buat. Untuk code nya bisa kita lihat dibawah :

.animasi-left-right {
display: inline-block;
}
.animasi-left-right:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.animasi-left-right:hover:after {
width: 100%;
background: #16A085;
}

5. Underline - Right to Left

Konsep untuk ini sama dengan poin nomor 4. Kita tinggal menambahkan positioning dari kanan (kanan: 0). Mari kita lihat contohnya di bawah ini.

.animasi-right-left {
display: inline-block;
position: relative;
padding-bottom: 3px;
}

.animasi-right-left:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

.animasi-right-left:hover:after {
width: 100%;
background: #16A085;
}

6. Underline - Middle Out

Efek ini muncul dari tengah dan membuat garis bawah dengan CSS3 yang membuat efek "menarik", ini adalah efek garis bawah terbaik menurut saya pribadi. Lihat saja kode di bawah ini.

.animasi-middle {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.animasi-middle:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.animasi-middle:hover:after {
width: 100%;
background: #16A085;
}