Buat Tombol Demo / Download CSS Keren

Hello sobat kali ini saya akan share nih tentang Cara Membuat Tombol Demo / Download CSS Keren di Blog. Memang sudah banyak sekali materi seperti ini di mbah Google, tetapi tidak ada salahnya saya share kan? Karena tombol-tombol CSS yang akan saya share ini adalah karya saya sendiri, dan referensi tentunya masih pada mbah Google. Oke sedot aja caranya sob..

Style 1

Download Gratis

Masukkan kode CSS ini ke dalam html kamu, caranya masuk ke Template -> Edit HTML, centang Expand Widget Template. Lalu copy dan paste kan kode berikut diatas kode ]]>

.tombol-ardi-techno{
background-color:#EF3838;
font-family: 'Verdana', sans-serif;
font-size:12px;font-color:#fff;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, #fff 0%, #fff 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.tombol-ardi-techno:active {
top:3px;
background-image: linear-gradient(bottom, #fff 100%, #fff 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.tombol-ardi-techno:before {
background-color:#FF0000;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxNtmr7w1_BpTf-M71C3wnrfo-h0wyT6j0gOl198fGyh7AqgmGiQzR1wgYqucM4wu9Yhsv0sBlkLBsEEjDlUPjO3qhYzvOR5YO44ndG9VXLI952tAHVMHNDZZOTKqCDYcQNBDqGBfM6Xo/s1600/lostsector-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.tombol-ardi-techno:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Masukkan  kode html nya, masuk ke Entri Baru -> Pilih tab HTML (sampingnya Compose)

<a class="tombol-ardi-techno" href="LINK SOBAT DISINI">MASUKKAN TEXT DISINI</a>

Style 2

Judul Tombol

Kode CSS

.tombol-ardi-techno { background-color:rgb(0,165,240); border:1px solid #fff; border-radius:4px 4px 4px 4px; padding:10px 15px; margin:10px; box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset,0px 1px rgb(255,255,255); color:rgb(255,255,255); text-decoration:none;display:inline-block; font:bold normal 13px Arial,Helvetica,sans-serif; text-shadow:0 -1px rgba(0,0,0,0.2); cursor:pointer; }
.tombol-ardi-techno:hover { box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset,0 1px #FFF,0 0 0 30px rgba(255,255,255,0.21) inset; -webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset,0 1px #FFF,0 0 0 30px rgba(255,255,255,0.21) inset; -moz-box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset,0 1px #FFF,0 0 0 30px rgba(255,255,255,0.21) inset; background-color:rgba(0,165,240,.9); } .tombol-ardi-techno:active,.tombol-ardi-techno:focus { -moz-box-shadow:0 0 0 1px rgba(255,255,255,0.21) inset,0 1px #fff,0px 0 10px rgba(0,0,0,0.21) inset; -webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.21) inset,0 1px #fff,0px 0 10px rgba(0,0,0,0.21) inset; box-shadow:0 0 0 1px rgba(255,255,255,0.21) inset,0 1px #fff,0px 0 10px rgba(0,0,0,0.21) inset; background-color:rgba(0,165,240,.9); }

Kode HTML nya

<a href='LINK / URL DOWNLOAD' target='_blank' class='tombol-ardi-techno'>Judul Tombol</a> 

Nah itu sob, 2 style dulu, kapan-kapan akan tambah lagi (kalau ada yang request ya kalau nggak ya gak saya tambah..wkwk).  Buat Tombol Demo / Download CSS Keren