/ Published in: HTML
Creates a "pill" button with rounded corners; expands with text.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<style> a.pill { text-decoration:none; float:left; height:22px; color:#333; line-height:22px; font-weight:bold; text-align:center; } a.pill span.left { background:url(path/image.png) no-repeat left 0; display:block; width:4px; float:left; height:22px; } a.pill span.right { background:url(path/image.png) no-repeat right 0; float:left; height:22px; padding:0 10px 0 5px; } a.pill:hover > span { background-position:right -22px; } </style> <a href="#" class="pill"> </a>