Koleksi Button Demo dan Download Keren

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 :

DEMO LIVE

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

Code CSS + HTML:


<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

Code CSS + HTML:


<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

Code CSS + HTML:


<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

Code CSS + HTML:


<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

Code CSS + HTML:


<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.

Enjoy it and keep blogger spirit with proBlogiz Blogger Design

9 komentar

Limit Post

17 Desember 2012 pukul 15.41

waah keren keren mas tombolnya :D

Unknown Author

17 Desember 2012 pukul 23.46

ok thanks mas bro:)

Faisal Rachmadin

21 Desember 2012 pukul 00.36

Yang nomer 1 efek pressed-nya keren bro! :)

jalupangna

22 Desember 2012 pukul 04.41

keren dan cantik, 2 jempol buat kang hriza muh. :)

22 Desember 2012 pukul 12.18

sama kang
thanks udah mampir ya

de Best from West

1 Januari 2013 pukul 22.25

kang punten mau nyobain ya. keren dan menarik amat buat belajar. Makasih sebelumnya kang.

2 Januari 2013 pukul 00.19

ya silahkan mas:)

Oelyn

5 Februari 2013 pukul 20.39

waaaaaaaaaaaaah.....!! ni blog bikin betah aja bang.... yg aku butuh banyak disini... izin nimbrung ya...?!! emmm... blajar n pake-pake gtu bang hehe..

Muharam yusuf

21 Maret 2013 pukul 21.30

kalau mau di tempatkan di tengah gmn..

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

ProBlogiz

Home

Tutorial

SEO

Basic

Template

Koleksi Button Demo dan Download Keren

7 Koleksi Demo Button dan Download Button Keren

Demo Button dan Download Button 01

Demo Button dan Download Button 02

Demo Button dan Download Button 03

Demo Button dan Download Button 04

Demo Button dan Download Button 05

Demo Button dan Download Button 06

Demo Button dan Download Button 07

Artikel Terkait Lainnya:

9 komentar

Google+ Followers

Like Me

Blog Arsip

Kategori

Artikel Popular

Artikel Terbaru

Support

Usefull Tools

Pages