Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

Side by Side:

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:

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:

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 1 of 7 pages  1 2 3 >  Last »

You have an error in your code.
in the css you declare it as 'boldbuttons' and after that in the implementation (html) code you refer to 'ovalbuttons', i didnt understand why it doesnt work until i saw there is a mis-match between the CSS and the HTML.
Posted by Lior on 12/08, 06:50 PM
How should I use this menu on my blog/website
Posted by David on 12/09, 01:57 AM
Thanks for the heads up Lior, HTML code fixed.
Posted by ddadmin on 12/09, 10:19 PM
Quite nice, but I think it would be better if the two images were actually two buttons one above the other so the colour of the button could change when you hover instead of just a text effect.
Posted by Richard Winskill on 12/10, 08:08 PM
i agreen with Richard Winskill hohh
Posted by buildcold on 12/11, 07:37 AM
Can anyone tell me how I can use this button in a <form> instead of the button generated by "<input type="submit" name="submit" value="Donate" />" ?

I've got a form action going to a URL via POST so I don't think I need the href on the button itself. But I don't know how to hook the CSS button to the form itself.

Thanks in advance...
Posted by Scott on 12/13, 12:21 PM
This is what I came up with to change the color when someone mouses over. Don't be too critical as I'm new to CSS

a.boldbuttons{
background
transparent url(images/roundedge-gray-left.gifno-repeat top left;
displayblock;
floatleft;
fontbold 13px Arial/* Change 13px as desired */
line-height22px/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height30px/* Height of button background height */
padding-left8px/* Width of left menu image */
text-decorationnone;
}

a
:link.boldbuttonsa:visited.boldbuttons {
color
white/*button text color*/
}

a
:hover.boldbuttonsa:active.boldbuttons {
background
transparent url(images/roundedge-red-left.gifno-repeat top left;
displayblock;
floatleft;
fontbold 13px Arial/* Change 13px as desired */
line-height22px/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height30px/* Height of button background height */
padding-left8px/* Width of left menu image */
text-decorationnone;
}

a
:hover.boldbuttons spana:active.boldbuttons span {
background
transparent url(images/roundedge-red-right.gifno-repeat top right;
displayblock;
padding4px 10px 4px 2px/*Set 10px to be equal or greater than'padding-left' value above*/

}

a
.boldbuttons span{
background
transparent url(images/roundedge-gray-right.gifno-repeat top right;
displayblock;
padding4px 10px 4px 2px/*Set 10px to be equal or greater than'padding-left' value above*/
}

a
:hover.boldbuttons{ /* Hover state CSS */
text-decorationunderline;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflowhidden/*See: http://www.quirksmode.org/css/clearing.html */
width100%;
Posted by Michael on 12/15, 09:53 AM
And in response I had to use javascript to use it for a form, not sure if that's an option for you but the code I used is as follows:
<script language="JavaScript">
function 
submitform()
{
  document
.formname.submit();
}
</script>

<class="boldbuttons" href="javascript: submitform()"><span>Search Items</span></a

hope it helps.
Posted by Michael on 12/16, 03:51 PM
Did someone notice the nosie flicker with IE?
Posted by atzekalle on 12/20, 04:07 PM
how can i can i center this one? sorry im just a noob in HTML
Posted by flint on 12/20, 06:27 PM

Comment Pages 1 of 7 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.