Button Simple CSS

Penggunaan tombol biasanya indentik dengan situs download, yang di mana sebuah tombol mempengaruhi tampilan sebuah situs dan dapat mempermudah navigasi pengunjung. Dan yang akan kita buat di sini adalah tombol yang menggunakan css sederhana.

Tutorial Blog: Cara Membuat Tombol Pure CSS

Instalasi

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut sebelum kode ]]></b:skin> atau </style>

.ut {
color:#000;
background:#fff;
padding:6px 15px;
border:2px solid #000;
-webkit-transition: .3s;
transition: .3s;
font-size:12.5px;
}
.ut:hover{
color:#fff;
border:2px solid #000;
background-color:#000;
}

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

Untuk menampilkan hasilnya, gunakan kode HTML berikut pada postingan bagian ~~Compose~~ HTML

<center><a title="mp3" href="#url" class="ut" target="_blank"><i class="fa fa-arrow-down" aria-hidden="true"></i>&nbsp; &nbsp; DOWNLOAD</a></center>

Opsi

mp3 Teks hover

#url Link tautan

Result

DOWNLOAD