CSS Button

Perlu di perhatikan bahwa untuk mengaplikasikan css ini dibutuhkan Font Awesome, jadi tambahkan link css ini tepat di atas kode </head>.

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

Style Tombol Demo & Download Pertama

Preview:

• Demo
• Download

.tombol2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.tombol2 ul{margin:0;padding:0}
.tombol2 li{display:inline;margin:5px;padding:0;list-style:none}
.tombol2 li a.dem2,.tombol2 li a.down2{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}
.tombol2 li a.down2{background:#3498db}
.tombol2 li a.dem2:hover,.tombol2 li a.down2:hover{background:#666}
.tombol2 li a.dem2:active,.tombol2 li a.down2:active{cursor:pointer}
.tombol2 li a.dem2:after,.tombol2 li a.down2: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}
.tombol2 li a.down2:after{content:'\f019'}

Pemasangan CSS seperti pada umumnya, bisa di template yaitu di atas kode </b:skin> atau di dalam postingan dengan di apit tag <style> .. css .. </style> Untuk pemanggilan css tersebut atau pemasangannya dapat lihat kode HTML di bawah, ingat ! tempelkan di postingan mode HTML ya.

<div style="text-align: center;">
<ul class="tombol2">
<li><a class="dem2" href="http://URL_DOWNLOAD" target="_blank">Demo</a></li>
<li><a class="down2" href="http://URL_DOWNLOAD" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Tombol keren ini pasti sudah tau kan, yaps ini adalah salah satu karya dari blogger ternama yaitu arlina design.

Style Tombol Demo & Download Kedua

Preview:

• Demo
• Download

.tombol{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 0px solid rgba(0,0,0,0.1)}
.tombol ul{margin:0;padding:0}
.tombol li{display:inline;margin:5px;padding:0;list-style:none}
.tombol li a.dem,.tombol li a.down{position:relative;padding:14px 48px 14px 16px;background:#303030;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}
.tombol li a.down{background:#f44336}
.tombol li a.dem:hover{background:#f44336}
.tombol li a.down:hover{background:#202020}
.tombol li a.dem:active,.tombol li a.down:active{cursor:pointer}
.tombol li a.dem: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:16px 24px;font-family:fontawesome;transition:all .3s}
.tombol li a.down:after{content:'\f019';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}
.tombol li:hover a.dem:after,.tombol li:hover a.down:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}

Berikut kode HTML untuk pemanggilannya.

<li><a class="dem" href="https://UR_URL" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="down" href="https://UR_URL" rel="nofollow" target="_blank">Download </a></li>
</ul>
<div class="clear"></div>