Kode CSS
/* Style buttons */
.btn{
padding: 7px 22px;
border: 2px solid #0095ff;
border-radius: 4px;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: 500;
background: transparent;
outline: none !important;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
z-index: 1;
color: white;
}
.btn:after {
border-radius: 4px;
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
background: linear-gradient(90deg, #0095ff, #e1ff00);
transition: all 0.3s ease;
}
.btn:hover {
color: rgb(0, 0, 0);
}
.btn:hover:after {
right: auto;
left: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
Keterangan:
- Sesuaikan ukuran font dan padding dengan keinginan
3. Buat postingan baru lalu masuk pada mode HTML.
Auto Width:
<a href="#" target="_blank"><button class="btn">Tombol</button></a>
Full Width:
<a href="#" target="_blank"><button class="btn" style="width:100%">Tombol</button></a>
Keterangan:
- pada bagian href="#" , ganti # dengan link anda sendiri
- target="_blank" berfungsi untuk membukanya ditab baru ketika tombol diklik
Preview Hasil:
Auto Width:
Full Width:
Pengaturan pada template Blogger
1. Buka Pengaturan Tema > Edit HTML
2. Cari kode ]]></b:skin> lalu pastekan kode CSS tersebut tepat diatas kode ]]></b:skin>
Referensi:
cssbuttons.vercel.app
0 comments:
Posting Komentar
Komen dong