Skip to content

Instantly share code, notes, and snippets.

@dannylloyd
Created August 25, 2011 14:24
Show Gist options
  • Select an option

  • Save dannylloyd/1170780 to your computer and use it in GitHub Desktop.

Select an option

Save dannylloyd/1170780 to your computer and use it in GitHub Desktop.
Css buttons
<html>
<head>
<style type="text/css">
.button{
display:block;
color:#555555;
height:30px;
line-height:31px;
margin-bottom:14px;
margin-right: 3px;
text-decoration:none;
width:100px;
background-color: lightgray;
border: solid 1px darkgray;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
cursor: hand;
cursor: pointer;
}
.button.add, .button.delete, .button.save, .button.search{
text-align: left;
}
input[type=submit]
{
height: 32px;
}
.button:hover{
color: white;
background-color: gray;
}
.add{
background:url('http://icons.iconarchive.com/icons/custom-icon-design/office/16/add-1-icon.png') no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url('http://icons.iconarchive.com/icons/kyo-tux/phuzion/16/Sign-Error-icon.png') no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.save {
background:url('http://icons.iconarchive.com/icons/iconshock/real-vista-computer-gadgets/16/floppy-disk-icon.png') no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.search {
background:url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/16/search-icon.png') no-repeat 10px 8px;
text-indent:30px;
display:block;
}
</style>
</head>
<body>
<a href="#" class="button add">Add</a>
<a href="#" class="button delete">Delete</a>
<input type="submit" class="button save" value="Save" />
<input type="submit" class="button search" value="Search" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment