Dynamic Drive CSS Library- Bold CSS Buttons

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

Bold CSS Buttons

Author: Dynamic Drive

These big, bold CSS buttons are constructed using a rounded edge button image sliced into two pieces, then put back together using CSS. The button text style reacts on the "hover" state.

Demo:

Single button:

Dynamic Drive CSS Library

Side by Side:

Download Now CSS buttons

The images used: Choose the desired set to download (2 images total):

Gray oval (2 images):

Blue oval (2 images):

Green button (2 images):

Red button (2 images):

Metallic brown button (2 images):

The CSS:

<style type="text/css">

a.boldbuttons{
background: transparent url('media/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('media/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%;
}

</style>

Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.

The HTML:

<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="boldbuttons" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>


<h4>Side by Side:</h4>

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

Code Info

Rate this code:

Date Posted: 12/08/2007

Revision History: None

Usage Terms: Click here

Your Comments (64)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

http://www.bddesignzone.com
web design company

Posted by bddesignzone on 10/25, 12:51 AM

This technique can't be used on a submit button (I mean <input type="submit"....). For that you must create a button with javascript code to perform a "submit".

Posted by Bob Bedford on 10/31, 03:49 AM

cool buttons

Posted by Alex on 11/03, 02:30 AM

I want to know if its possible to put something like this on a website form. Like Scott wants it.

Is it possible to use it for SUBMIT Button.

Thanks

Vipin- Web Designers in India

Posted by Vipin from India on 01/14, 04:09 AM

Giris

Posted by GiRiS on 02/04, 10:31 AM

I used to use these buttons on the previous version of the site Restaurante Japonês Manekineko.

Posted by Manekineko on 02/19, 08:25 AM

thanks for submitting useful tutorial

Posted by amol on 03/30, 05:39 AM

Best web Development Company

Posted by Rassel hawlader on 03/31, 08:20 AM

super

Posted by turkay on 04/10, 01:00 PM

hi, whats up wit u, hope u cool,this script work so well i love it love it.

Posted by kolade on 05/19, 06:32 AM

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

Commenting is not available in this weblog entry.