Cara Membuat Efek Sliding Underline Menggunakan CSS

Cara membuat Efek Sliding Underline/Garis Bawah solid menggunakan costumasi CSS. Seperti yang saya pakai pada Judul Posting pada halaman Homepage. Dengan sedikit CSS, terlihat lebih menarik dan keren, betul gak. hehehe.

Teknik juga ada pada bagian Menu Nav pada demo [emangbikingalau-banget.blogspot.com]. Jika tertarik download temanya, silahkan kunjung juga : Download CampBlog Template.

Berikut kode-kode CSS yang bisa anda masukkan di atas  </styele> atau ]]></b:skin>

Untuk Penerapannya Silahkan Baca artikel selanjutnya, Cara Menerapkan Efek Sliding Underline Pada Web/Blog.

Efek Border dari Atas ke Bawah 

/* Efek Border dari Atas ke Bawah*/
.atas-bawah {
display: inline-block;
}
.atas-bawah:after {
content: '';
display: block;
height: 0;
width: 100%;
background: transparent;
transition: height .5s ease, background-color .5s ease;
}
.atas-bawah:hover:after {
height: 3px;
background: #333;
} 

Efek Border dari Bawah ke Atas 

/* Efek Border dari Bawah ke Atas */
.bawah-atas {
 display: inline-block;
 position: relative;
}
.bawah-atas: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;
}
.bawah-atas:hover:after {
 height: 3px;
 background: #333;
}

Efek Border dari Kiri ke Kanan 

/* Efek Border dari Kiri ke Kanan */
.kiri-kanan {
    text-decoration: none;
    display: inline-block;
    border-bottom: 3px solid transparent;    
    width: 0px;
    transition: 0.5s ease;
    white-space: nowrap;
    height: 25px;
}
.kiri-kanan:hover {
    border-bottom: 3px solid #333;
    width: 200px;
}

Atau dengan CSS

/* Efek Border dari Kiri ke Kanan */
.kiri-kanan {
display: inline-block;
}
.kiri-kanan:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.kiri-kanan:hover:after {
width: 100%;
background: #333;
}

Efek Border dari Kanan ke Kiri 

/* Efek Border dari Kanan ke Kiri*/
.kanan-kiri {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}

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

.kanan-kiri:hover:after {
    width: 100%;
    background: #333;
}

Efek Border dari Tengah ke Luar 

/* Efek Border dari Tengah ke Luar*/
.tengah-keluar {
 display: inline-block;
 position: relative;
 padding-bottom: 3px;
}
.tengah-keluar:after {
 content: '';
 display: block;
 margin: auto;
 height: 3px;
 width: 0px;
 background: transparent;
 transition: width .5s ease, background-color .5s ease;
}
.tengah-keluar:hover:after {
 width: 100%;
 background: #333;
}

Efek Border dari Masuk Kemudian Keluar 

/* Efek Border dari Masuk Kemudian Keluar*/
.garis-masuk-keluar {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.garis-masuk-keluar:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    transition: width 0s ease, background .5s ease;
}
.garis-masuk-keluar:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #333;
    transition: width .5s ease;
}
.garis-masuk-keluar:hover:before {
    width: 100%;
    background: #333;
    transition: width .5s ease;
}
.garis-masuk-keluar:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

Efek Border dari Muncul Kemudian Hilang 

/* Efek Border dari Muncul Kemudian Hilang*/
.garis-muncul-hilang {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.garis-muncul-hilang:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transition: width 0s ease;
}
.garis-muncul-hilang:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #333;
    transition: width .5s ease;
}
.garis-muncul-hilang:hover:before {
    width: 0%;
    background: #333;
    transition: width .5s ease;
}
.garis-muncul-hilang:hover:after {
    width: 0%;
    background: transparent;
    transition: width 0s ease;
}

Selamat Mencoba dan berkreasi, saya ambil dari bradsknutson.com/blog/css-sliding-underline/. Thank's...:)

Newer Post Older Post