Posts Tagged ‘button’
Clean CSS Buttons
Posted 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
