CSS Sliding Underline Text
Demo di sini
snapshot only
Cara pemasangan
Langkah 1.Pada (New Design) Blogger Dashboard--> Klik 'Drop Down Menu' --> Pilih Customize --> Advanced --> Add Css
Langkah 2. Copy dan Paste kod dibawah kat dalam bahagian Css-->Klik 'Apply To Blog'.
Langkah 3:Untuk mengaktifkan teks yang mempunyai efek sliding underline,anda perlu sertakan kod ni bersama teks anda.
atau
snapshot only
Cara pemasangan
Langkah 1.Pada (New Design) Blogger Dashboard--> Klik 'Drop Down Menu' --> Pilih Customize --> Advanced --> Add Css
Langkah 2. Copy dan Paste kod dibawah kat dalam bahagian Css-->Klik 'Apply To Blog'.
/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}
Langkah 3:Untuk mengaktifkan teks yang mempunyai efek sliding underline,anda perlu sertakan kod ni bersama teks anda.
<div class="uslide">Sliding Underline Text 1</div>
atau
<div class="uslide2">Sliding Underline Text 2</div>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.