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.
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:
