Posted By

sander63 on 06/30/11


Tagged


Versions (?)

CSS buttons sliding doors


 / Published in: CSS
 

URL: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

  1. <a class="button" href="#"><span>Submit</span></a>
  2.  
  3. a.button {
  4. /* Sliding right image */
  5. background: transparent url('button_right.png') no-repeat scroll top right;
  6. display: block;
  7. float: left;
  8. height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
  9. margin-right: 6px;
  10. padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
  11. /* FONT PROPERTIES */
  12. text-decoration: none;
  13. color: #000000;
  14. font-family: Arial, Helvetica, sans-serif;
  15. font-size:12px;
  16. font-weight:bold;
  17. }
  18. a.button span {
  19. /* Background left image */
  20. background: transparent url('button_left.png') no-repeat;
  21. display: block;
  22. line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
  23. padding: 7px 0 5px 18px;
  24. }
  25. a.button:hover span{
  26. text-decoration:underline;
  27. }

Report this snippet  

You need to login to post a comment.