Dynamic Drive CSS Library- CSS Square buttons

CSS Library: Links & Buttons: Here

CSS Square buttons

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.

For your convenience, we've created 5 different colored square buttons to get you on your way!

Demo:

Submit Reset Confirm Cancel I Agree Decline

Dynamic Drive CSS Library JavaScript Kit

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

Gray squares (2 images):

Green squares (2 images):

Orange squares (2 images):

Blue squares (2 images):

Red squares (2images):

The CSS:

<style type="text/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 the gray squares. 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="http://www.dynamicdrive.com/style/"><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>

Code Info

Rate this code:

Date Posted: 12/02/2007

Revision History: None

Usage Terms: Click here

Your Comments (30)

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

The
.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%;
}

does not make any sense. {width} should be determined automatically/dynamically based on {link text length},

Posted by Don on 02/19, 11:32 AM

Nice buttons. Thanks

Posted by rubber2002 on 02/22, 08:44 AM

I will soon be using the green button on my new website. The new site will allow to check Google PR, but with style and flair. Thanks Dynamic Drive.

Posted by Decoder on 03/14, 12:58 PM

Really nice creation! NOt only these css button, i often solve many of my css problem with the help of your css examples. Thanks dynamicdrive.

Posted by Thiru on 03/21, 02:46 AM

href=mail doen not seem to work
Is there any way to fix this, thanks

<a href="mailto:test@gmail.com?subject=Please have a Success Representative contact me with more information about my training needs" class="squarebutton"><span style="width: 120px; color: #494949">Email to a Friend</span></a>

Posted by Mohit on 03/21, 02:56 PM

Is it possible to add a disabled state? I've seen it done for other buttons, but they usually have a fixed rather than dynamic width. Currently you use TOP and BOTTOM to differentiate between the 'active' and 'hover' states, but could it be done by using a TOP CENTER BOTTOM technique where the disabled part of the image is placed at the bottom?

Posted by Christian on 03/21, 05:47 PM

nice gloss, very proffesioal

Posted by guest on 04/06, 11:16 AM

brilliant, i mix and match the colours just to jazz it up a little.

Posted by nosher on 05/02, 02:25 PM

i forgot to mention if you create multiple instances of squarebutton with numbers added you can mix and match the colours for multiple menu headings as well to highlight different types of links

Posted by nosher on 05/02, 02:30 PM

What modification do I have to do so one of the buttons stays active???

Posted by Efrain on 05/04, 01:51 AM

Comment Pages 2 of 3 pages < 1 2 3 >