Dynamic Drive CSS Library- CSS Square buttons

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

CSS Square buttons

Author: Dynamic Drive

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 (40)

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

Nice look, wonder if we can have the same look using the INPUT tag.

Posted by rguerrae on 12/03, 12:11 AM

Hi

Nice tutorial on css button.
But this button as an limitation meaning it could not be expandable.

If have button "Save" then this get fit into it,
but if the button text expand into some bigger sentence
or with 2 to 3 words then this button have effect, so css will not be displayed properly.
I mean middle portion will have blank background.

Posted by Viral Mehta on 12/04, 09:15 AM

Really nice. Well done!

Posted by Callum on 12/08, 11:50 AM

How could I use these buttons to appear center of a table TD tag.. Whatever the way I use, it is left aligned... how can I make it center of a column??? please help.

Posted by Shekar on 12/10, 11:21 AM

Awsom.. I love it. It has been a while I have been excited about css !

Posted by aj on 12/18, 02:34 PM

@callum I think it wasn't created for putting it in tables as it is a) a button and not a tablecell background and b) meant for tableless div layouts, so if you want an table cell background you maybe should look somewhere else if not you should learn to code tableless

Posted by man!ac on 01/03, 04:10 AM

Nice one. It's really useful. Thank's

Posted by Game01 on 01/19, 12:28 AM

Does not work for me - I see only the right image

Posted by Mohit on 02/12, 12:35 PM

Anybody know of an easy way to align these buttons in the center of a page. It would be great to use them, but I have not been able to get these aligned without using yet another container object.

Posted by ListDaddy on 02/14, 08:24 AM

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

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

Commenting is not available in this weblog entry.