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  ^_^