Button Demo and Download Simple CSS
Dalam postingan ini saya akan membagikan tutorial cara menambahkan tombol Demo dan tombol Download untuk blogger. Tutorial ini dapat membantu anda dalam menulis tentang tutorial blog. Tombol Demo dan Download dibuat dengan CSS dengan efek mouse hover shadow. Dua ikon diambil dari fontawesome. Jadi sebelum melihat tutorial ini pastikan Anda sudah menambahkan fontawesome di blog Anda.
Tutorial Blog: Cara Membuat Tombol Demo dan Download Pure CSS
Instalasi
Masuk Blogger: Tema > Edit HTML
Tambahkan kode CSS berikut sebelum kode
]]></b:skin> atau </style>.tt {
color:#000000;
background:#fff;
padding:6px 15px;
border:none;
-webkit-transition: .3s;
transition: .3s;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}
.tt:hover{
color:#000000;
border:none;
background-color:#fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}Tambahan
Tambahkan Font Awesome berikut ini setelah kode
<body><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>Jika sudah ada, bisa diabaikan
Simpan Tema
Selanjutnya untuk menampilkan hasilnya, tambahkan kode HTML berikut pada postingan bagian
<center>
<a href="#url" class="tt" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i> DEMO</a> <a href="#url" class="tt" target="_blank"><i class="fa fa-arrow-down" aria-hidden="true"></i> DOWNLOAD</a></center>Opsi
#url Link tautanResult