Judul : Membuat Flat Button dengan CSS
link : Membuat Flat Button dengan CSS
Membuat Flat Button dengan CSS
Halo Gengs, apa kabar nihh ?, kali ini Juragan mau ngasih snippet yang sederhana tapi keren banget buat diaplikasikan di website, langsung aja ya gengs begini codenya
<input type="submit" class="flat-button" value="Flat Button">
Diatas ini adalah code HTML-nya, mudah kan, hanya menggunakan class saja..
Oke lanjut ke CSS nya..
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
.flat-button {
font-family: 'Montserrat', sans-serif;
position: relative;
font-size: 19px;
width: 250px;
height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
Diatas Juragan menggunakan font Montserra dengan tag @import, biar keliatan kekinian aja style-nya :D
kalo udah jadi, kira kira begini hasilnya
Gimana gengs? lebih modern kan tampilannya. Dmoga bermanfat ya, see you ^_^
Demikianlah Artikel Membuat Flat Button dengan CSS
Sekianlah artikel Membuat Flat Button dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Flat Button dengan CSS dengan alamat link https://jendeladuniainternet.blogspot.com/2015/11/membuat-flat-button-dengan-css.html
0 Response to "Membuat Flat Button dengan CSS"
Posting Komentar