Cara Membuat Hover Slide Border Bottom Menggunakan CSS

Cara Membuat Hover Slide Border Bottom Menggunakan CSS

HobbyTekno - Halo, Pada postingan ini Admin akan memberikan Tutorial Cara Membuat Hover Slide Border Bottom Menggunakan CSS, seperti yang disebutkan pada judul, kita hanya memerlukan CSS dan tanpa Javascript yang akan memperlambat atau memperberat loading website anda nantinya. Langsung saja berikut Cara Membuat Hover Slide Border Bottom Menggunakan CSS.

Langkah Membuat Hover Slide Border Bottom Menggunakan CSS


1. Salin code berikut ke Code Editor anda, lalu simpan sebagai file .html , misalnya : index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Slide Border Bottom</title>
</head>
<body>
    <center><h2>Slide Border Bottom by Hobbytekno.xyz</h2></center>
    <ul>
        <li><a class="slide-border" href="#">MENU 1</a></li>
        <li><a class="slide-border" href="#">MENU 2</a></li>
        <li><a class="slide-border" href="#">MENU 3</a></li>
    </ul>
</body>
</html>
2. Lalu salin lagi code CSS dibawah ini, simpan sebagai style.css
li {
    margin-bottom: 10px;
}
.slide-border {
    display: inline-block;
    color: #000;
    text-decoration: none;
}
.slide-border::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}
.slide-border:hover::after {
    margin-bottom: 10px;
    width: 100%;
    transition: width .3s;
}
ul li {
    display: inline-block;
}
ul li a {
    padding: 20px;
    font-weight: bold;
}
3. Jika anda ingin mengubah kecepatan slide nya bisa ganti pada CSS bagian .slide-border::after  ganti .3s sesuai keinginan anda.
transition: width .3s;
4.  Jika ingin menbubah panjang garis slide, ganti pada CSS Bagian .slide-border:hover::after ganti 100%; sesuai keinginan anda.
width: 100%;
Untuk DEMO silahkan klik link dibawah ini :
Demo

Sekian Cara Membuat Hover Slide Border Bottom Menggunakan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar 

No comments for "Cara Membuat Hover Slide Border Bottom Menggunakan CSS"