Cara Membuat Tombol Demo dan Download Material Design di Blogger

Haliminfo - Bagi blogger ataupun webmaster dan web designer yang mempunyai blog download atau demo ( Content Downloader ) semisal seperti menjual template blogger atau template template lainnya fitur tombol (button) demo dan donwload yang responsive sangat di anjurkan. Selain menarik penjung juga membuat blog lebih rapi dan terlihat bagus.

Tombol tersebut bermanfaat mempermudah dan mempercantik tampilan dari seuatu post dan blog kita, Belakangan ini Material Design dalam dunia Blogger, Webmaster dan Web designer banyak dibicarakan, dikarenakan Material Design memiliki tampilan yang elegan dan kekinian. Lalu apa arti material design yang sering dibicarakan tersebut.?

Material Design

Desain Material / aslinya dalam bahasa inggris bernama Material Design adalah bahasa desain yang dikembangkan Google dan diumumkan pada konferensi Google I/O pada 25 Juni 2014. Material Design sendiri bukan bertujuan untuk pengubahan interface secara keseluruhan, melainkan langkah untuk menuju New Visually Representative language, yang maksudnya mewujudkan visualisasi agar menyerupai bentuk nyat.

Material design sendiri cenderung menggunakan perpaduan solid dan tanpa gradient, dan hanya menggunakan efek pencahayaan sederhana namun tetap terkesan simple dan elegan. Baik teman semua masih ada yang mencari informasi mengenai apa itu material design bisa langsung mengunjungi halaman resi yang dibuat oleh google dibawah ini

Membuat Tombol Download dan Demo di Blogger

Untuk cara membuatnya silahkan copy code dibawah ini dan letakan sebelum </b:skin>

#holder{
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background: white;
  padding: 10px;
  width: 250px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-65%);
  box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
  border-radius: 2px;
}
.button {
  background: #3D4C53;
  margin : 20px auto;
  width : 200px;
  height : 50px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  border-radius: 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.btnTwo {
  position : relative;
  width : 200px;
  height : 100px;
  margin-top: -100px;
  padding-top: 2px;
  background : #26A69A;
  left : -250px;
  transition : .3s;
}
.btnText {
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 63px;
  margin-right : -130px;
  color : #FFF;
}
.button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/
  left: -130px;
}
.button:hover .btnText{ /*When hovering over .button change .btnText*/
  margin-left : 65px;
}
.button:active { /*Clicked and held*/
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}
a {
  color:#fff;
  text-decoration:none;
}

dan cara pembuatan codenya bisa dilihat dalam code berikut

<div id="holder">

<div class="button">
    <p class="btnText"><a href="#">READY?</a></p>
    <div class="btnTwo">
      <p class="btnText2">GO!</p>
    </div>
 </div>

<div class="button">
    <p class="btnText"><a href="#">CANCLE</a></p>
    <div class="btnTwo">
      <p class="btnText2">X</p>
    </div>
 </div>

</div>

Demo !

penasaran hasilnya ?
untuk hasil bisa dilihat pada tombol dibawah ini, bagaimana keren kan ?
silahkan coba sendiri dan rasakan keindahan dari material button ini

Disini