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 4 of 4 pages « First < 2 3 4

I really new at this I know how to make a html and css page and a few other little things but I cant seem to make this work. im using IE if that means anything. can someone help me I am trying to make a website and need someone who knows the ropes. maybe any good websites on how tos? help!

Posted by jessica on 09/20, 09:34 AM

Nice...nice... thanks.

Posted by Cahaya Biru on 12/20, 10:52 AM

If you're looking for an expandable button, http://www.webfixtech.com/development_cssbutton.php
Oh, and it works in a form, as an input element.
It's just the background image, the rounded corners are created by using CSS borders.

Posted by Dragos on 12/22, 08:25 PM

nice, but not working in Firefox3

Posted by Jawad on 01/07, 03:30 PM

YEP, ITS NOT WORKING WITH this code
[CODE]a.expandbuttons:hover{background-position: -18px 0}
a.expandbuttons:hover span{ background-position: 18px 0;
}[CODE]

Only work in this properties
[CODE]a.expandbuttons:hover{background-position: bottom left}
a.expandbuttons:hover span{ background-position: bottom right;
}[CODE]

Posted by Jawad on 01/07, 03:36 PM

hello everyone!
I've got stacked... can anyone help?

my html is:

<div id="header">
<ul id="nav">
<li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

  </div> 

What do I need to change? I have 3 links ul in my page.
Thanks!

Posted by Ken on 02/04, 07:37 PM

Good one. I had also problem to align buttons center.
I embedded in table, worked for me.

<div style="border:1px;width:380px">

<div style="text-align:center;width:190px;float:left;"><table align="center"><tr><td><span>CONTACT US</span></td></tr></table></div>
<div style="text-align:center;width:189px;float:right;border-left:1px dotted;"><table align="center"><tr><td><span>Submit</span></td></tr></table></div>
</div>

Thanks,
Vijay M.

Posted by Vijay Malamardi on 02/05, 02:45 AM

Thank you. I was wondering whether you have similar code for input submit buttons?

Posted by Alex on 05/09, 07:06 AM

that's the button element

Posted by dragos on 05/09, 08:50 AM

Does anybody know how to create our own images of a particular color?

Posted by Adeveloper on 06/03, 12:40 AM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.