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

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 6 pages « First  <  1 2 3 4 5 >  Last »

Posted by kikyly on 02/26, 07:43 PM
??????????????????
???????????
??????
??
Posted by difenza on 02/28, 03:51 AM
gokil
Posted by difenza on 02/28, 03:56 AM
Posted by daliy on 02/29, 02:46 AM
Nice guide!
Posted by Student Accommodation on 03/05, 04:16 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

<a href="mailto:test@gmail.com?subject=Please have a Success Representative contact me with more information about my training needs" class="squarebutton"><span style="width: 120px; color: #494949">Email to a Friend</span></a>
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
<a herf="http://www.x8x.org.cn"北京搬家>
<a herf="http://www.bjsflt.cn"北京搬家>
<a herf="http://www.hple.com.cn"自动门>
<a herf="http://www.gmstktwx.cn"空调维修>
<a herf="http://www.kangdabaojie.cn"北京保洁>
<a herf="http://www.khcoo.com"净化工程>
<a herf="http://www.whstwl.com"北京物流>
<a herf="http://www.yiwanjiaju.com.cn"木门直销>
<a herf="http://www.bjwrkt.com"空调回收>
<a herf="http://www.bjbzgj.cn"展柜>
<a herf="http://www.bjjcpl.com"汽车陪练>
<a herf="http://www.beizhong.com/pagestyle/page4.asp"电机维修>
<a herf="http://www.beizhong.com/pagestyle/page4.asp"进口电机维修>
<a herf="http://www.beizhong.com"进口电机修理>
<a herf="http://www.beizhong.com/pagestyle/page4.asp"北京汽车陪练>
<a herf="http://www.bjjds.cn/pagestyle/page1.asp"热水器维修>
<a herf="http://www.bjjds.cn/pagestyle/page1.asp"燃气灶维修>
<a herf="http://www.bjjds.cn/pagestyle/page1.asp"万家乐热水器维修>
Posted by iking on 03/28, 12:20 AM

Comment Pages 3 of 6 pages « First  <  1 2 3 4 5 >  Last »

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Supported BB codes: [b], [i], [u], [em], [strike], [strong], [pre], [code], and [blockquote].

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below ("previewing" post does not require it):


Copyright 2006-2008 Dynamic Drive Read our Usage Terms before using any of the CSS codes.
Dynamic Drive DHTML and CSS Code Library