Advanced Search

Pill Button Wrapper

/ Published in: HTML
Save to your folder(s)
Creates a "pill" button with rounded corners; expands with text.

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.