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;
}