Posts Tagged ‘button’
Clean CSS Buttons
Posted by: sabbour on: July 3, 2008
- In: Code
- 11 Comments
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