advanced code snippet search

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

Expand | Embed | Plain Text 
  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.