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 - S Q U A R E

These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible glossy looking CSS buttons. Each button can accommodate text of variable widths and supports a hover effect when the mouse rolls over it. The only limitation is the height of the button, which is fixed based on the background image's height.

Submit Reset Confirm Cancel I Agree Decline

Expanding Buttons Square Download

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

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

The CSS:

a.squarebutton{
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.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="squarebutton" href="#"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="squarebutton" href="#"><span>Submit</span></a> <a class="squarebutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>

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

W3C Validation