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

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

<span style="width: 120px; color: #494949">Email to a Friend</span>
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
I really like this buttons,they look cool.I just start learning HTML & CSS, can you plz let me know how to make this buttons work?
I put the CSS code inside <Head> tags and HTML in the <body>. I saved the image as gif and it's not working.
Can you help me please.
thanks a lot in advance....
Posted by Bona on 05/09, 03:13 AM

Comment Pages 2 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.