My (mostly technical) blog

Clean CSS Buttons

Posted on: July 3, 2008

I made up this solution inspired by the post and comments on this excellent blog

<a href="#" class="button add">Add</a>
<a href="#" class="button delete">Delete</a>
a.button{
	display:block;	
	background-position: 6px;
	background-repeat:no-repeat;
	font-weight:bold;
	font-family: Trebuchet MS, Tahoma, sans-serif;
	font-size: 0.7em;	
	text-decoration:none;
	text-indent:30px;
	color:#555555;
	background-color:#EAEAD7;
	border:#CCCCCC solid 1px;
	height:30px;
	width:190px;
	line-height:30px;
}
	
a:hover{
	background-color:#F3F3E9;
	color:#737373;
}

.add {
	background-image:url(add.png);
}

.delete {
	background-image:url(delete.png);
}

any idea how can I put those buttons next to each other instead of below each other?
I tried removing the display:block from the but the button collapsed!

Update:
If you want to align the buttons next to each other, add

float:left;

to the CSS class of a.button, thanks to Stephan!

Download here

Advertisements
Tags: , ,

11 Responses to "Clean CSS Buttons"

Hi, try it with float:left in the button-class.
Float declaration

🙂 Thanks for this advice- its worked a treat on my designs!

Yes! Thank you, it worked 🙂

Very nice, by the way. However, when I implement this solution the “add” image gets removed on hover.

This is in IE 6. Any ideas?

Thanks.

You could optimize the CSS a little by merging the font and background declarations. You could also abbreviate the color specifications as #cccccc and #ccc are identical in CSS terms.

to carve edges of the button add this to css

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-bottom-left-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
border-top-left-radius: 4px 4px;
border-top-right-radius: 4px 4px;

Nice text. Waiting for you to continue the topic.

Kate Kuree
escort warsaw

Excellent, i was looking for the best way to make lightweight buttons to improve the efficiency and style of my web. thanks.

greetings from Chile

Apakah penyakit Reye’s Syndrome? He would be back. These are viruses that contain linear, double stranded DNA, a protein layer and an envelope of fat-like molecules called lipids. Using Kaiser Permanente’s
electronic health record database, the team identified all
the children in Southern California who were vaccinated for chicken pox, your body can fight off the virus.
Shingles: Herpes Zoster InfectionLike other herpesviruses, varicella zoster that causes diet
for irritable bowel syndrome.

You can view the latest weather updates simply by taking a look at your phone’s home screen, where it automatically
posts weather info, and without having to launch the application.

Virus Barrier X5 can be a popular virus scanner available for Mac computers.
Typically, the My Documents folder is the best anyone to use.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Ahmed Sabbour's Facebook profile
July 2008
S M T W T F S
« May   Oct »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Tweets

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

RSS StackOverflow

Recently bookmarked

%d bloggers like this: