Simple Button and Download

Pada kesempatan kali ini saya akan share lagi tutorial membuat buttom demo dan download simple menggunakan css dan html yang mana bisa dipakai atau di pasang pada blog kamu.

Tapi sebelumnya kamu harus memasang fonstawesome dulu pada template kalian jika ingin masang tombol tersebut.

Sebelumnya anda sudah memasang fontawesome pada template, jika belum silakan tambahkan link dibawah ini sebelum </head>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum </style>

.whitebutton{margin:20px auto;padding:20px 0;width:200px}
.whitebutton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.whitebutton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.whitebutton span{background:#444;color:#fff;display:block;font-size:12px;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.whitebutton .up{background:#e25734;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.whitebutton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.whitebutton .down:before{content:'\f14a';font-family:FontAwesome;font-weight:normal;margin-right:6px;color:#aaa}
.whitebutton:hover .up{opacity:1;transform:translate(0,0)}
.whitebutton:hover .down{opacity:1;transform:translate(0,-90px)}
.whitebuttondemo{margin:20px auto;padding:20px 0;width:200px}
.whitebuttondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.whitebuttondemo a:before{content:'\f002';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.whitebuttondemo a:hover{color:#fff}
.whitebuttondemo span{background:#444;color:#fff;display:block;font-size:12px;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.whitebuttondemo .up{background:#444;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.whitebuttondemo:hover .up{opacity:1;transform:translate(0,0)}

1. Bagi yang menggunakan Gunakan tag <br>

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

2. Bagi yang menggunakan Tekan "Enter" untuk baris baru

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="#">Demo</a>
<span class="up">click to begin</span>
</div>
<div class="whitebutton">
<a href="#">Download</a>
<span class="up">click to begin</span>
<span class="down">1.6MB .rar</span>
</div>

Kemudian isikan link tautan anda pada kode yang saya tandai #, selesai.

Hasilnya akan tampil seperti di bawah ini

Demo
click to view

Download
click to begin
1.6MB .rar

Cukup mudah bukan, silakan dikreasikan kembali dan selamat mencoba.