Membuat Tombol Download Dengan CCS - Lah kok pake bikin tombol download segala? emang iya sih sobat bisa saja mencari tombol button khusus untuk tombol download di google, namun apa iya sobat masih pengen pakai tombol download hasil karya orang lain? Enggak dong… nah oleh karena itu mari kita belajar cara membuat tombol download sederhana Dengan CCS. sobat bisa lihat Demo nya terlebih dahulu di bawah ini
Demo
Aieza
- Masuk pada blog sobat
- Edit HTML
- cari code ]]></b:skin>
- Lalu Copy Kan Code dibawah ini Tepat di atas kode ]]></b:skin>
@font-face{
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.a-btn{
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
padding:10px 30px 10px 70px;
position:relative;
float:left;
display:block;
overflow:hidden;
margin:10px;
background:#fff;
background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0),color-stop(rgba(246,246,246,1),0.74),color-stop(rgba(237,237,237,1),1));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.a-btn-symbol{
font-family:'WebSymbolsRegular', cursive;
color:#555;
font-size:20px;
text-shadow:1px 1px 2px rgba(255,255,255,0.5);
position:absolute;
left:20px;
line-height:32px;
-webkit-transition:opacity 0.3s ease-in-out;
-moz-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
transition:opacity 0.3s ease-in-out;
}
.a-btn-text{
font-size:20px;
color:#d7565b;
line-height:16px;
font-weight:bold;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
text-shadow:1px 1px 2px rgba(255,255,255,0.5);
display:block;
}
.a-btn-slide-text{
font-family:Arial, sans-serif;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
color:#555;
text-shadow:0px 1px 1px rgba(255,255,255,0.9);
}
.a-btn-slide-icon{
position:absolute;
top:-30px;
width:22px;
height:22px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF32KQiDfYlhXMaGu0ZTuQJkDhcyucOWb0TYj-2pnj1Qn1blSOzSAH9MNnre5ZNM_dZhUuhdNbt9BYB98qcD680oB0MMrAbBYvj5_9WAMjqWqTGoiD5trhRuStXzr-XVGMABQ_3g3h34Cf/s22/arrow_down_black.png) no-repeat top left;
left:20px;
opacity:0.4;
}
.a-btn:hover{
background:#fff;
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:hover .a-btn-symbol{
opacity:0;
}
.a-btn:hover .a-btn-slide-icon{
-webkit-animation:slideDown 0.9s linear infinite;
-moz-animation:slideDown 0.9s linear infinite;
animation:slideDown 0.9s linear infinite;
}
.a-btn:active{
background:#d7565b;
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:active .a-btn-text{
color:#fff;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
}
.a-btn:active .a-btn-slide-text{
color:rgba(0,0,0,0.4);
text-shadow:none;
}
@keyframes slideDown{
0% { top: -30px; }
100% { top: 80px;}
}
@-webkit-keyframes slideDown{
0% { top: -30px; }
100% { top: 80px;}
}
@-moz-keyframes slideDown{
0% { top: -30px; }
100% { top: 80px;}
}
- Simpat Template Sobat
- Untuk Pemanggilan Coding nya sobat tinggal masukan Code di bawah ini
<a href="#" class="a-btn">
<span class="a-btn-symbol">Z</span>
<span class="a-btn-text">Download Now</span>
<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
<span class="a-btn-slide-icon"></span>
</a>
- Epss jangan lupa di ganti # warna Merah dengan link sobat
- Selamat mencoba !!