Dynamic Drive CSS Library- CSS Square buttons

CSS Library: Links & Buttons: Here

CSS Square buttons

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 (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 »

北京物流
北京保洁
自动门
空调维修
万家乐热水器维修
妇科咨询
门窗厂
北京货架
包装公司
万家乐热水器维修
北京汽车陪练
空调回收
机柜
北京装修公司
北京装潢公司
综合布线
北京搬家
北京搬家
燃气灶维修
北京装饰公司
电机修理
北京保洁
hp服务器
IBM服务器
CISCO交换机
北京代开发票

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

Posted by iking on 03/28, 12:20 AM

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