Cara Buat Demo Download Button Keren Dengan CSS

 
Demo Download Button

Bagi para blogger yang memiliki sebuah blog download tentunya tidak ingin tentu blog pribadinya tersebut terlihat biasa-biasa saja dan membosankan dengan tampilan yang seadanya, dalam sebuah blog download pastinya akan terdapat sebuah tombol demo ataupun tombol download. Nah jika ingin blog kalian terlihat lebih profesional dan terlihat elegan, tentunya kalian harus sedikit melakukan perombakan pada tombol demo maupun download agar terkesan menarik bagi para pengunjung.

Blog Shinobi kali akan memberikan sedikit tips cara memodifikasi tombol demo dan tombol download yang pasti responsive dan keren menggunakan CSS.


1. Tombol demo download kode 1 seperti gambar di bawah ini

Demo Download Code

Khusus Kode 1 dan 3, langkah pertama kalian masuk dulu ke pengaturan tema dan pastikan kalian sudah memasang kode html font awesome tepat di atas kode </head>

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

Setelah menempelkan kode font awesome di atas klik simpan tema kalian terlebih dahulu. Kemudian  cari kode ]]></b:skin> atau kode </style> letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau kode </style>

/* Blog Shinobi Demo Download Button 1 */ .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .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'}

Jika sudah maka selanjutnya klik simpan lagi tema blog kalian, lalu coba buat postingan dengan menggunakan kode html javascript di bawah ini.

<div style="text-align: center;">
<ul class="button">
 <li><a class="Demo" href="https://www.shinobi-blog.com" target="_blank">Demo</a></li><br />
<li><a class="download"herf="https://www.shinobi-blog.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

2. Tombol demo download kode 2 tampilan seperti gambar dibawah ini

Demo Download Code

Cari kode ]]></b:skin> atau kode </style> letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau kode </style>

/* Blog Shinobi Demo Download Button 2 */

.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}

.boddbtn ul {padding:0;margin:0;}

.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}

.demobtn,.downloadbtn{color:#fff !important;padding:10px 15px 10px 18px;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}

.demobtn {background-color: #3498db;}

.downloadbtn {background-color: #34d968}

.demobtn:hover {background-color: #2980b9;color: #fff;}

.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}

Jika sudah menerapkan kode CCS di atas maka selanjutnya klik simpan lagi tema blog kalian, lalu coba buat postingan dengan menggunakan kode html javascript di bawah ini.

<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="https://www.shinobi-blog.com/" rel="nofollow" target="_blank">DEMO</a>&nbsp;&nbsp;<a class="downloadbtn" href="https://www.shinobi-blog.com/" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

3. Tombol demo download slide kode 3 tampilan seperti gambar dibawah ini

Demo Download Slide Code

Untuk tombol demo download kode tiga sama seperti kode nomor satu kalian harus memasang font awesome terlebih dahulu tepat di atas kode </head>

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

Setelah menempelkan kode font awesome di atas klik simpan tema kalian terlebih dahulu. Kemudian  cari kode ]]></b:skin> atau kode </style> letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau kode </style>

/* Blog Shinobi Demo Download Button 3 */

#wrap{margin:20px auto;text-align:center}

#wrap br{display:none}

.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}

.btn-slide2{border:2px solid #efa666}

.btn-slide:hover{background-color:#0099cc}

.btn-slide2:hover{background-color:#efa666}

.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}

.btn-slide2:hover span.circle2{color:#efa666}

.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}

.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}

.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}

.btn-slide2 span.circle2{background-color:#efa666}

.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}

.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px}

.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}

.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}

Jika sudah maka selanjutnya klik simpan lagi tema blog kalian, lalu coba buat postingan dengan menggunakan kode html javascript di bawah ini.

<div id="wrap">
<a href="https://www.shinobi-blog.com" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="https://www.shinobi-blog.com" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>


Catatan : Ubah url (shinobi-blog.com) dengan alamat url demo dan download kalian, jika ingin lihat hasilnya

0 Response to "Cara Buat Demo Download Button Keren Dengan CSS"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel