Posted By

1man on 05/13/09


Tagged

css button doors livetext


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

dndworx


Button Sliding Doors


 / Published in: CSS
 

Finally got round going through a sliding door example myself. All fairly straightforward apart from a few IE6 issues (who would have guessed!).

The button is floated so you may need to add overflow: hidden to it's container.

  1. /* HTML: <a href="####" class="clickOrder"><span>Click here to order</span></a> */
  2.  
  3. #introBox .clickOrder {
  4. background: url(../images/blueButtoneLeft.gif) no-repeat;/* Long image */
  5. padding: 14px 0 14px 35px;/* Adjust padding depending on height */
  6. float: left;/* Very important for IE6*/
  7.  
  8. /* Below for decoration */
  9. text-decoration: none;
  10. color: #fff;
  11. font-weight: 700;
  12. margin: 0 0 20px 20px;
  13. }
  14. #introBox .clickOrder span {
  15. background: url(../images/blueButtoneRight.gif) top right no-repeat;/* Overlap Image */
  16. padding: 12px 26px 14px 0;/* Padding to show the overlap image on the right */
  17. }

Report this snippet  

You need to login to post a comment.