October 2009 Archives

Why are they better than other rounded corners input buttons and links?

• Their size change to fit the button text
• They keep the elements' inline display so it can be used in a line of text
• As thay are not a block elements, no float is needed so they can be centered or used inside a floated container
• They have a pure css rollover and pushed effects (except in IE6)
• They use only one image to improve download speed and avoid delays showing the rollover or pushed effects
• They have simple semantic valid XHTML strict markup and valid CSS 2.1 without any hacks or tricks
• Tested with IE5, IE5.5, IE6, IE7, IE8, FF1, FF2, FF3, Opera 9, Opera 10, Konkeror 4.2, Epiphany 2.2, Safari 3, Safari 4, Chrome 3 and Chrome 4. Available versions for Windows and Ubuntu linux.

Doctype

This example requires an xhtml-transitional doctype to work, but it can be easily adapted to xhtml strict by adding position: relative; and top: -3px; to the .button span span code to correct the vertical alignment of the text. The number of pixels in the top may vary according to the button and font sizes.

Markup

The markup of the link consists of an a tag around two span tags. The button's text is written into the inner span. Note that all tags are inline tags so the button can be used both in a line of text or in a block container. The use of the three tags is needed to support the sliding door technique and make the code work in FF2 that does not implement the inline-block display type. The a tag displays the right corner of the image and the outer span displays the left one. The elements have the same background image but they display different parts of it to create the effect of the sliding door. The background image has to be wide enough to fit the desired button's text. In this example the button can be at most 400px wide, but wider buttons can be displayed by creating a bigger image.

A button class has been applied to the a tag to give it the button look and feel. Styles for the span tags are assigned with descendant selectors.

<a href="#" class="button"><span><span>button text</span></span></a>

The markup of the input version follows the same principles and consists of two span tags surrounding the input button.

<span class="button"><span><input type="submit" value="button text" /></span></span>

Background image

The background image has three buttons, the upper one is used to display the button in its normal state and the middle one to show the rollover effect and the bottom one is for the pushed button effect. The white space between them is necessary to avoid a bug in the vertical alignment in IE6 display unwanted parts of the image.

CSS

.button {
	cursor:pointer;
	text-decoration:none;
	background:url(bg-btn-corp2.gif) no-repeat right top; 
	padding-right:10px; 
	display:inline-block;
	line-height:29px;
	height:29px;
	font-size:24px;
	color:#FFFFFF;
	font-weight:bold;
}

span.button {
	vertical-align: middle;
}

.button span { 
	background:url(bg-btn-corp2.gif) no-repeat left top; 
	padding-left:10px;
	line-height:29px;
	height:29px;
	display:inline-block;
}

.button span span {
	background:transparent;
	padding:0;
	
	font-size:14px;
}

.button span input {
	cursor:pointer;
	font-family: inherit;
	font-weight:bold;
	background:transparent;
	border:0;
	padding-top:5px;
	font-size:14px;
	color:#FFFFFF;
}


.button:hover {
	background-position:right -39px;
}

.button:hover span {
	background-position:left -39px;
}

.button:active {
  background-position:right -78px;
}

.button:active span {
  background-position:left -78px;
}

Examples

In a line of text

These and links are used as inline in a line of text.

---

Within lists

2. link1

---

In floated containers

---

Centered

---