I’m not a CSS guru, but recently I stared playing on this stuff. Just for a snooping, I created Google like small buttons with Icons.
You can download the necessary 24X24 .png images from Small Gray Images
And add the following styles into you CSS. I’m using this style for Button and Anchor tags. You can customize it based on your UI requirement
btn { float: left; padding-bottom: 5px; clear: both; }
input[type="submit"].btn, a.btn { color: #6e6e6e; font: normal 11px Helvetica, Arial, sans-serif; text-decoration: none; padding: 5px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; }
input[type="submit"].edit, a.edit { background: url(Images/edit.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].trash, a.trash { background: url(Images/delete.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].publish, a.publish { background: url(Images/publish.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].details, a.details { background: url(Images/details.png) no-repeat #f3f3f3; padding-left: 30px; }
We can make Bigger images just by adding Font-size and Padding attributes as follows
input[type="submit"].edit-big, a.edit-big { background: url(themes/Images/edit.png) no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; }
For your Buttons / Anchors add the class attribute as follows
<input type="submit" value="Edit" class="btn edit"/>
<a class="btn edit" href="#">Edit</a>
Finally your Buttons / Anchors looks like as follows:
