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

yes the flicker at the ie6 suxx! can you fix it please?
or create a new button in your libary without any flicker stuff :D PLEASE!!
Posted by max on 12/21, 04:34 AM
I never saw any flicker on the standard button in IE7 or 6 but I did in my code, and I fixed it with an image preload script
Posted by Michael on 12/23, 08:20 AM
Dear Scott, Michael,

For good accessibility:
//css
#menu {
margin0px;
padding10px;
}
#menu li {
floatleft;
text-aligncenter;
list-
style-typenone;
}
#menu li a, #menu li input {
displayblock;
width120px;
height30px;
margin2px 0px;
line-height30px;
font-size12px;
color#c09;
font-weightbold;
text-decorationnone;
backgroundurl(/images/menu.gif);
bordernone;
}
#menu li a:hover, #menu li input:hover {
backgroundurl(/images/menu_mo.gif);
}

// html
<ul id="menu">
  <
form method="post">
    <
input type="hidden" name="action" value="logout" />
    <
li>anchor tag ...</li>
    <
li><input type="submit" value="logout" /></li>
  </
form>
</
ul


Tested in FF2 and IE7

Example:
<a href="http://www.haan.net/test/submit_button_with_background_image_and_hover_effect.php">http://www.haan.net/test/submit_button_with_background_image_and_hover_effect.php</a> 


cheers
ah, much leaner than my code. I appreciate it cause like I said I'm not that good with CSS at the moment. Just enough to get me by
Posted by Michael on 12/23, 10:04 AM
Dear Michael,

I searched and worked for more then one hour on this code.
It is for a client.
It is nice because you can combine with UL/LI menu's and hyperlinks and still have all form features WITHOUT javascript.

I hope you can use it!
it's actually perfect for the site that I'm working on now and am implementing it now. My former code was too bulky as I had seperate classes for the menu, submit buttons, and link buttons and I was trying to find a way to combine them all called from a single CSS set. You've been a big help.
Posted by Michael on 12/23, 10:25 AM
I had a problem with multiple classes which was not covered here, but was used in the second example. I needed a navigation with several different colors instead of all one color. I decided to use multiple classes and call a second class (see below)
<class="boldbuttons 02"
<class="boldbuttons 03"
Now, there was an issue. For some reason, it would not select the second class due to it being a number. The first class would work, but the second was being overlooked. To save everybody some time, try using a word and not a number as your secondary class.
<class="boldbuttons two"
Good luck!
Posted by will bowling on 12/28, 12:58 PM
I had a problem with multiple classes which was not covered here, but was used in the second example. I needed a navigation with several different colors instead of all one color. I decided to use multiple classes and call a second class
<class="boldbuttons 02"
,
<class="boldbuttons 03"
and so on. Now, there was an issue. For some reason, it would not select the second class due to it being a number. The first class would work, but the second was being overlooked. To save everybody some time, try using a word and not a number as your secondary class.
<class="boldbuttons two"
Good luck!
Posted by will bowling on 12/28, 01:03 PM
Buttons are nice really who needs ready css buttons for their content.
Posted by Joomlabased on 01/01, 03:55 PM
when i am using the buttons i am getting white corners around the rounded edges, how do i get rid of those
Posted by p_merc on 01/03, 06:54 AM

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


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