Anda masih ingat artikel proBlogiz tentang cara membuat buttton/tombol keren dengan CSS, nah kali ini Desain Blog kembali akan membagi koleksi tombol/button keren khusus untuk digunakan sebagai Demo Button dan Download Button. 7 koleksi tombol/button, Demo Button dan Download Button Keren dengan CSS ini dibuat tanpa menggunakan image/gambar dan juga tanpa Javascript apapun. So this is cool button!!
Bagi Anda yang mempunyai blog dengan tema desain, blog design, CSS
turorial, Free Template Blog atau tema blog yang banyak menyediakan
file-file gratis untuk di-download tentu Demo Button dan Download Button
yang cantik, keren, dan profesional looking adalah bagian penting dari
blog Anda. Demo Button dan Download Button ini digunakan untuk
menyediakan link-link yang mengarahkan ke tujuan baik itu url/link
sebagai Demo Live (preview) atau link yang mengarahkan ke alamat/url
sumber file-file yang akan di-download/diunduh.
Jadi langsung saja lihat Demo Live-nya masing-masing button/tombol dibawah ini, dengan tool desain preview kami :
Cara menggunakan tool desain preview :
Klik tombol Clear pada area kode dan CSS, kemudian copy salah satu kode button dibawah dan paste-kan di area kode tersebut. Selanjutnya klik Preview untuk melihat hasil atau tampilan button.
*Gunakan browser webkit support seperti Chrome , Firefox
7 Koleksi Demo Button dan Download Button Keren
Demo Button dan Download Button 01
<style>
.button {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 2em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 20px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.button:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
<a class="button" href="#">View Demo </a>
<a class="button" href="#">Download</a>
Demo Button dan Download Button 02
Code CSS + HTML:
<style>
/* Button */
.button {
background-color: #222;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
border: 1px solid #111;
color: grey;
cursor: pointer;
display: inline-block;
font: bold 14px/10px sans-serif;
margin: 20px;
padding: 10px 15px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
vertical-align: top;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:hover,
.button:focus {
background-color: #242424;
color: #f6f6f6;
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:after {
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-image: linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
background-position: 50% 0%;
background-size: 200% 200%;
content: '';
display: none;
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.button:hover:after,
.button:focus:after {
display: block;
}
.button:before {
background: #363636;
bottom: -8px;
content: '';
left: -8px;
position: absolute;
right: -8px;
top: -8px;
z-index: -1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
inset 0 1px 1px hsla(0,0%,0%,.4),
inset 0 0 5px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
inset 0 1px 1px hsla(0,0%,0%,.4),
inset 0 0 5px hsla(0,0%,0%,.2);
box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
inset 0 1px 1px hsla(0,0%,0%,.4),
inset 0 0 5px hsla(0,0%,0%,.2);
}
.button:active {
background-color: #202020;
color: #b6b6b6;
padding: 11px 15px 9px;
-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
inset 0 1px 4px hsla(0,0%,0%,.8);
-moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
inset 0 1px 4px hsla(0,0%,0%,.8);
box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
inset 0 1px 4px hsla(0,0%,0%,.8);
}
.button:active:after {
display: block;
left: 1px;
opacity: .5;
right: 1px;
top: 31px;
}
</style>
<a class="button" href="#">DOWNLOAD</a>
<a class="button" href="#">DEMO LIVE</a>
Demo Button dan Download Button 03
Code CSS + HTML:
<style>
.button:link {
margin: 30px 30px 0 30px;
display: inline-block;
padding: 15px 50px;
-moz-border-radius: 4px / 3px;
-webkit-border-radius: 4px / 3px;
border-radius: 4px / 3px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: rgba(64,187,217,.12); /* layer fill content */
box-shadow: inset 0 1px 0 rgba(55,255,255,.21), inset 0 1px 35px rgba(64,187,217,.34), 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */
}
.button:hover {
margin: 30px 30px 0 30px;
display: inline-block;
padding: 15px 50px;
-moz-border-radius: 4px / 3px;
-webkit-border-radius: 4px / 3px;
border-radius: 4px / 3px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: rgba(164,187,217,.15); /* layer fill content */
box-shadow: inset 0 1px 0 rgba(255,255,255,.21), inset 0 1px 35px rgba(164,187,217,.34), 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */
}
.button:active {
margin: 30px 30px 0 30px;
display: inline-block;
padding: 15px 50px;
-moz-border-radius: 4px / 3px;
-webkit-border-radius: 4px / 3px;
border-radius: 4px / 3px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: rgba(164,187,17,.12); /* layer fill content */
box-shadow: 0 1px 0 rgba(155,255,255,.21), 0 1px 15px rgba(64,187,217,.34), inset 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */
}
.button:link,.button:visited,.button:hover, a:active {
color: #3A34A3;
font-family:georgia;
font-weight: 700;
text-transform: uppercase;
font-size:.75em;
text-decoration: none;
text-shadow: 0 1px #292929;
}
</style>
<a class="button" href="#">DOWNLOAD</a>
<a class="button" href="#">DEMO LIVE</a> Demo Button dan Download Button 04
<style>
.push_button {
position: relative;
width:220px;
height:40px;
text-align:center;
color:#FFF;
text-decoration:none;
line-height:43px;
font-family:'Oswald', Helvetica;
display: block;
margin: 30px;
}
.push_button:before {
background:#f0f0f0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#D0D0D0), to(#f0f0f0));
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
position: absolute;
content: "";
left: -6px; right: -6px;
top: -6px; bottom: -10px;
z-index: -1;
}
.push_button:active {
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
rgba(255, 255, 255, .1) inset;
top:5px;
}
.push_button:active:before{
top: -11px;
bottom: -5px;
content: "";
}
.red {
text-shadow:-1px -1px 0 #A84155;
background: #D25068;
border:1px solid #D25068;
background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
background-image:-o-linear-gradient(top, #F66C7B, #D25068);
background-image:linear-gradient(to bottom, #F66C7B, #D25068);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0,
.5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0,
.5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255,
255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}
.red:hover {
background: #F66C7B;
background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
background-image:-o-linear-gradient(top, #D25068, #F66C7B);
background-image:linear-gradient(top, #D25068, #F66C7B);
}
.blue {
text-shadow:-1px -1px 0 #2C7982;
background: #3EACBA;
border:1px solid #379AA4;
background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
background-image:linear-gradient(top, #48C6D4, #3EACBA);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0,
.5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0,
.5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255,
255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}
.blue:hover {
background: #48C6D4;
background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
<a href="#" class="push_button red">View Demo</a>
<a href="#" class="push_button blue">Download</a>
Demo Button dan Download Button 05
<style>
.button {
width: 200px;
margin: 50px auto;
}
.button a {
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /*
IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /*
IE6-9 */
}
.button a, p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/* HOVER
================================================== */
.button:hover .bottom { margin: -10px 0 0 10px }
.button:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
/* ACTIVE
================================================== */
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+
*/
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /*
IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C
*/
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /*
IE6-9 */
}
.button:active .bottom { margin: -20px 0 0 10px }
.button:active .top { margin: -70px 0 0 10px }
</style>
<div class="button">
<a href="#">View Demo</a>
</div>
<div class="button">
<a href="#">Download</a>
<p class="top">click to download</p>
<p class="bottom">file 2.3MB .zip</p>
</div>
Demo Button dan Download Button 06
<style>
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
margin: 10px;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
</style>
<a class="button downloadbutton" href="#" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Download</span></a>
<a class="demobutton button" href="#" rel="nofollow" style="float:
left;" target="_blank"><span style="display:
inline-block;">Live Demo</span></a>
Demo Button dan Download Button 07
<style>
.button1 {
display: block;
font: bold 16px Arial;
letter-spacing:;
text-decoration: none;
margin: 20px auto;
padding: 20px 30px 20px 25px;
width: 170px;
border-top-left-radius: 10px 50px;
border-bottom-left-radius: 10px 50px;
border-top-right-radius: 10px 50px;
border-bottom-right-radius: 10px 50px;
-moz-border-radius-topleft: 10px 50px;
-moz-border-radius-topright: 10px 50px;
-moz-border-radius-bottomright: 10px 50px;
-moz-border-radius-bottomleft: 10px 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
.button1:hover {
-moz-border-radius-topleft: 30px 50px;
-moz-border-radius-topright: 30px 50px;
-moz-border-radius-bottomright: 30px 50px;
-moz-border-radius-bottomleft: 30px 50px;
border-top-left-radius: 30px 50px;
border-bottom-left-radius: 30px 50px;
border-top-right-radius: 30px 50px;
border-bottom-right-radius: 30px 50px;}
.button1 span {
display: block;
margin: 2px 0 0;
font: oblique bold 11px verdana;}
.button2 {
text-decoration: none;
font: bold 13px Arial;
display: block;
margin: 20px auto;
padding: 6px 14px;
-moz-border-radius: 15px;
border-radius: 15px;
width: 100px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
.button2:hover {
-moz-border-radius: 5px;
border-radius: 5px;}
.blue {
color: #fff;
background: #48C9FF;
background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
text-shadow: #29a3cc 0 1px 3px;
-webkit-box-shadow:
inset 0 1px 0 #38bdf4,
inset 0 2px 0 #7bdeff,
0 1px 3px #777,
0 0px 1px #ccc;
-moz-box-shadow:
inset 0 1px 0 #38bdf4,
inset 0 2px 0 #7bdeff,
0 1px 3px #777,
0 0px 1px #ccc;
box-shadow:
inset 0 1px 0 #38bdf4,
inset 0 2px 0 #7bdeff,
0 1px 3px #777,
0 0px 1px #ccc;}
.blue span {
color: #217aa6;
text-shadow: #78d2f0 0 1px 0;}?
</style>
<a href="#" class="button1 blue">
Download file here
<span>size 1.3 mb zip file</span>
</a>
<a href="#" class="button2 blue">
View Demo >>
</a>
Pilih salah satu yang Anda suka Sob dan pasang di Blog Anda, untuk pemasangan button di blog bisa dilihat DISINI.
Pada dasarnya kode button diatas semua sudah disertakan dengan kode
HTML-nya untuk menerapkan style button CSS-nya, jadi kalo Anda ingin
meletakkan kode button di template, letakkan kode CSS saja (tanpa
diikutkan tag <style> dan kode HTML) tepat diatas tag ]]></b:skin>
Untuk memakainya button tersebut di postingan Anda, gunakan kode HTML saja dimanapun Anda mau (post editor dalam mode HTML)
contoh kode HTML button :
<a class="button" href="#">DOWNLOAD</a>
<a class="button" href="#">DEMO LIVE</a>
Anda juga bisa mengatur atau edit baik warna button, warna hover
button, warna button active atau font button, besar tombol, dll, di
Desain Preview Tool pada saat Anda melihat DEMO LIVE.
About
Categories
Popular
