Pill Button Wrapper


/ Published in: HTML
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.