» » Cara Pasang Bold CSS Buttons

Cara Pasang Bold CSS Buttons

Wednesday, July 29, 2009 | Posted by Admin

SSSssst saya ada tips buat anda untuk memasang button buat Download, pada content anda.Siiip kita mulai saja, karna saya nggak bisa basa basi bisanya cuman basah.He..he..he. Nah Demonya seperti ini :

Single button:



Mutiaramail

Side by Side:



Blog Invest Make Money


Letakkan kode dibawah ini diatas ]]></b:skin>
/*Credits: Dynamic Drive CSS Library */
/*Follow: URL: http://mutiaramail.blogspot.com */
/*URL: http://www.dynamicdrive.com/style/ */

a.boldbuttons{
background: transparent url('http://i721.photobucket.com/albums/ww218/sugwi/roundedge-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;
}
a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}
a.boldbuttons span{
background: transparent url('http://i721.photobucket.com/albums/ww218/sugwi/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}
a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
Jangan lupa friend, ada dua macam yang Single Button dan Double Button
Letakkan kode dibawah ini pada postingan anda
  • Singgle Button
<div class="buttonwrapper"> <a class="boldbuttons" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a> </div>
  • Double Button
<div class="buttonwrapper"> <a class="boldbuttons" href="http://www.dynamicdrive.com/style/csslibrary/category/C7/"><span>Download Now</span></a> <a class="boldbuttons" href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="margin-left: 6px"><span>CSS buttons</span></a> </div> Setelah itu selesei. Selamat mencoba dan semoga sukses.

Related With:

Trick
Tips

Labels: , , ,  

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)