Membuat Flat Button dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Flat Button dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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 http://jendeladuniainternet.blogspot.com/2015/11/membuat-flat-button-dengan-css.html

Tweet