Cara Membuat Tombol Demo dan Download Material Design Keren

Pekanan.com- Tombol demo dan download pada blog yang membahas seputar tutorial blogging sangat penting kehadirannya, dengan kedua tombol demo dan download ini visitor bisa melihat hasil secara langsung dari tutorial yang kita berikan, misalkan tutorial untuk membuat menu navigasi dalam blog, maka kita arahkan ke hasil dari tutorial yang kita berikan.

Melihat dari pentingnya tombol demo dan download pada blog ini, pada kali ini saya akan memberikan tutorial untuk membuat tombol demo dan download material design yang sangat elegan dan menarik.

Bagi anda yang ingin langsung menerapkan tombol demo dan download material desain ini pada blog anda, silahkan ikuti tutorial dibawah ini:

Cara Membuat Tombol Demo dan Download Material Design Keren

1. Silahkan masuk ke Blog>Theme>edit HTML Lalu letakan kode dibawah ini diatas kode </head>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel="stylesheet"/>

2. Setelah itu paste kode dibawa ini diatas kode </style> atau ]]></b:skin>

Style 1


/* model flat ui 1 */ .button { float : left ; list-style : none ; text-align:center;width:160px;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:#3498db;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:#e74c3c} .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.after,.button li a.download:after{content:'\f135';bacground: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'}

Style 2


/* model flat ui 2 */ .button2{float:left;list-style:none;text-align:center;width:200px;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:#3498db;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:200px;margin:auto;overflow:hidden} .button2 li a.download{background:#e74c3c} .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-animaton: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)}}

3.Lalu Gunakan kode berikut pada saat posting dan letakan pada mode HTML

Style 1


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

Style 2


<div class="text-align:center;"> <ul class="button2"> <li><a class="demo" href="your url name" target="_blank">Demo Link</a></li> <li><a class="download" href="your url name" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>

Info message

silahkan di ganti "your url name" dengan alamat URL blog sobat

Demikian dua style tombol demo dan downaload material design yang langsung bisa sobat pasang di blog sobat, semoga bermanfaat