Expanding Buttons

THIS COLUMN IS FOR SOME OTHER USE

THIS BOX IS FOR SOME OTHER USE

Fusce aliquet, nibh consectetuer hendrerit venenatis, orci arcu tempus quam, euismod luctus metus diam nec neque. Nullam mollis consequat mauris. Pellentesque et dui. Vestibulum scelerisque pharetra lorem.

C S S E x p a n d i n g B u t t o n s - B O L D

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.

Single button:

CSS Expanding Buttons Bold

Side by Side:

Download Now CSS buttons

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

Gray :
Blue :
Green :
Red :
Brown :
	Click Here For More Colours

The CSS:

a.boldbuttons{
background: transparent url('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('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 gray buttons. 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>

The coding for BOLD BUTTONS was developed by Dynamic Drive. Coquillion3D's purpose is to provide ADDITIONAL GRAPHICS to use with Dynamic Drive's code.

W3C Validation