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

The images are not sets of 2 as stated but a single image...why?

Posted by Nobody W. Cares on 05/14, 02:50 PM

Hi!

I want know too, how can I make button in center. I tried <center> and it didn´t work, of course in span. Please, help me!

And same in Finnish:
Haluaisin myös tietää, kuinka voin keskittää painikkeet. Yritin <center> eikä se tietenkään toiminut spanissa. Olkaa hyvä ja auttakaa minua!

Posted by Aleksi on 05/22, 04:53 AM

Works really well when using the default view if you zoom changing the font size the images are all messed up when using Firefox 2.0. This works right in IE7. does anyone know a way round this problem?

Posted by hearsay on 05/29, 08:51 AM

The cursor flickers between arrow and hand as I move across the button, with the arrow appearing at a one pixel border directly around the text (but within the button). The additional hourglass with the hand appears for a millisecond also and makes the experience a little disconcerting. I've been trying a while to come up with some non-flickering code. If anyone has some please share.

Thanks

Posted by R on 05/31, 02:53 PM

It's cool, this used the slide door style.

But I want to know how to use this effect to "input" label?

Posted by michael on 06/05, 11:28 PM

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???

I want to know this too.

Posted by Ramzey on 07/26, 10:54 AM

It is very fine to use the new commer
and new entry programmers
and also developer in if we use this steps it will decorate over site

any way tthan k a LOT

Posted by myci on 08/02, 06:05 AM

@man!ac: Yes, it would be better to position the button with divs/css, but for those who aren't skilled enough to do so, tables can work and will validate.

Posted by meh on 08/19, 12:27 PM

Anyone come up with a solution to apply this to a form's Submit button?

Posted by Chet on 09/10, 07:45 AM

IE6 has seriouse flicker. IE6 users will rarely update there browser and account for 20% of my traffic and 40% of my clients.

Posted by Johan on 09/17, 09:26 AM

Comment Pages 3 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.