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:
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 »
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
Dear Scott, Michael,
For good accessibility:
Tested in FF2 and IE7
Example:
cheers
For good accessibility:
//css
#menu {
margin: 0px;
padding: 10px;
}
#menu li {
float: left;
text-align: center;
list-style-type: none;
}
#menu li a, #menu li input {
display: block;
width: 120px;
height: 30px;
margin: 2px 0px;
line-height: 30px;
font-size: 12px;
color: #c09;
font-weight: bold;
text-decoration: none;
background: url(/images/menu.gif);
border: none;
}
#menu li a:hover, #menu li input:hover {
background: url(/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
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!
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.
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) 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. Good luck!
<a class="boldbuttons 02">
<a class="boldbuttons 03">
<a class="boldbuttons two">
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 , 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. Good luck!
<a class="boldbuttons 02">
<a class="boldbuttons 03">
<a class="boldbuttons two">
Buttons are nice really who needs ready css buttons for their content.
when i am using the buttons i am getting white corners around the rounded edges, how do i get rid of those
Commenting is not available in this weblog entry.
or create a new button in your libary without any flicker stuff :D PLEASE!!