Cara Membuat Demo dan Download Button Flat UI Keren

Cara Membuat Demo dan Download Button Flat UI Keren di Blog- Untuk membuat "Demo" dan "Download" button di blog sangatlah mudah, karena sudah dikatakan mudah berarti tak hanya blogger master saja yang bisa tetapi kalian para blogger pemula pun juga bisa membuatnya. Banyak sekali tutorial pembuatan demo dan download button yang tersebar di internet, dan kali ini saya akan memberikan tutorial cara membuat demo dan download button dengan efek yang lumayan bagus serta ringan dan sangat menarik. Tombol (button) ini biasa digunakan untuk keperluan berbagi template dan link (tautan) download saja

Cara Membuat Demo dan Download Button Flat UI Keren di Blog

Note : Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head>

1. Login ke Blogger terlebih dahulu dan masuk ke Dashboard Blog, pilih Template dan masuk ke Edit HTML

2. Salin dan letakkan kode CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Tombol Demo & Download by Libra Yanada */

#wrap {

margin:20px auto;

text-align:center;

}

#wrap br {

display:none;

}

.btn {

display:inline-block;

position:relative;

font-family:'Open Sans', Helvetica, sans-serif;

text-decoration:none;

font-weight:700;

background:#22313f;

padding:10px 20px;

margin:0 3px;

color:#fff;

border-radius:3px;

transition:all 0.3s ease-out;

text-transform:uppercase;

border-bottom:2px;

border-color:#1C1E29;

text-shadow:none;

}

.btn:hover {

background:#f22613;

}

.btn:active {

background:#f22613;

}

.btn.down {

background:#22313f;

}

.btn.down:hover {

background:#f22613;

}

.btn.down:active {

background:#f22613;

}

a.btn,a.btn:hover,a.btn:active {

color:#fff;

}

.btn i {margin-left:10px;}

Simpan Template / Save Template

3. Selanjutnya adalah tahap penerepan HTML untuk demo dan download button pada blog post

Keterangan : Terapkan HTML berikut di HTML editor (bukan ~~Compose~~)