Cara Mudah Membuat Tombol Demo dan Download Material Design

Pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat tombol demo dan download flat design atau bisa dibilang juga material design.

Akhir-akhir ini tampilan material design semakin ppopuler di mata para web designer dan programer.
Sehingga banyak dikalangan para pembuat website atau template blog mereka menggunakan tema material design ala google.

Nah, pada kesempatan kali ini pun saya akan berbagi pada sobat sebuat tombol demo dan download material design dengan tampilan yang menarik dan kekinian.

Enkanya menggunakan flatform blogspot dibandingkan dengan wordpress salah satunya adalah kita membuat membuat segala tampilannya sesuai denan yang kita inginkan tanpa harus mengerti secara dalam tentang koding.

Tombol demo dan download material design ini sangat cocok untuk sobat yang memiliki blog denan niche download, share template blog dan sebagainya yang berkaitan dengan demo dan download.

Tombol demo dan download flat design ini tidak membuat loading blog menjadi berat ya sob, karena dibuat hanya menggunakan CSS dan HTML saja tanpa JavaScript mau pun JQuery.

Jadi sobat tidak perlu hawatir blog sobat menjadi berat karena tombol demo dan download material design ini.

Dari pada lama-lama mending langsung kita lanjut ke cara pemasangan tombol demo dan download dibawah ini:

Tombol Demo Download Material Design Keren 

Pertama sobat masuk ke blogger. template. edit HTML.

Setelah itu copy kode CSS dibawah ini diatas kode </style> atau ]]></b:skin>.

Tombol Demo dan Download Material Design  Style 1

Kode Pembungkus CSS

/* CSS Button Style 1 */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Tombol Demo dan Download Material Design  Style 2

/* CSS Button Style 2  */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Kemudian jangan lupa save.


Nah langkah selanjutnya untuk menggunakan tombol demo dan download pada postingan caranya sangat mudah sob.

Ketika sobat ingin menulis artikel dan sobat memerlukan untuk memasang tombol dan demo ini sobat tinggal tulis dengan kode HTML dibawah ini:

HTML Style 1

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Link Demo Disini" target="_blank">Demo</a></li>
<li><a class="download" href="Link Download Disini" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

HTML Style 2

<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="ini link download kamu" target="_blank">Demo Link</a></li>
<li><a class="download" href="ini link download kamu" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear"></div>

Nah, itu dia sob tombol demo dan download materila design yang bisa saya bagikan pada kesempatan kali ini semoga bermanfaat.