Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:


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:

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:

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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.