Posted By

delibash on 05/28/09


Tagged

css html


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Vordreller
beneberle
michellebracken


Pill Button Wrapper


 / Published in: HTML
 

Creates a "pill" button with rounded corners; expands with text.

  1. a.pill {
  2. text-decoration:none;
  3. float:left;
  4. height:22px;
  5. color:#333;
  6. line-height:22px;
  7. font-weight:bold;
  8. text-align:center;
  9. }
  10.  
  11. a.pill span.left {
  12. background:url(path/image.png) no-repeat left 0;
  13. display:block;
  14. width:4px;
  15. float:left;
  16. height:22px;
  17. }
  18.  
  19. a.pill span.right {
  20. background:url(path/image.png) no-repeat right 0;
  21. float:left;
  22. height:22px;
  23. padding:0 10px 0 5px;
  24. }
  25.  
  26. a.pill:hover > span {
  27. background-position:right -22px;
  28. }
  29.  
  30. <a href="#" class="pill">
  31. <span class="left"></span>
  32. <span class="right">test button</span>
  33. </a>

Report this snippet  

You need to login to post a comment.