Cara Membuat Tombol Download dari CSS #1 - Red Button CSS#1 untuk Blogazine - Hallo semuanya apa kabar nih?, di sharing kali ini fahmi mau share beberapa hasil karya ciptaan fahmi sendiri yang didorong oleh beberapa teman-teman blogger, kali ini fahmi Mau bikin Tombol Download dari CSS #1 - Red Button CSS#1 Blogazine, "#1" artinya masih versi pertama, nanti fahmi akan buat versi-versi atau part-part lainnya. Langsung saja deh ke tutorial dibawah ini :
- Copy Code dibawah ini dan taruh di atas
]]></b:skin>
- Kalau sudah simpan template saja dulu, nah berikut ini adalah code pemanggilan css tersebut
<div class='tombol_mengkilat'>Download</div>
- Kalian bisa mengganti tulisan "Download" dengan tulisan lain.
- Selamat berkarya, salam bloggers
- Untuk Demo silahkan Klik Disini
.tombol_mengkilat{
font-family:Arial Black;
font-size:25px;
background-image: linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
width:250px;
height:auto;
padding:5px;
text-align:center;
border-radius:5px;
border:solid 2px #ddd;
}
.tombol_mengkilat a{
color:#fff;
text-decoration:none;
}
.tombol_mengkilat:hover{
box-shadow:0 1px 5px #000;
background-image: linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
}
.tombol_mengkilat:active{
background:rgb(211,7,29);
border:solid 1px #888;
text-shadow:1px 1px 1px #000;
box-shadow:inset 0 0 5px #000;
position:relative;
top:2px;
}
0 comments:
Post a Comment