SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Berlin, Germany
    0 Post(s)
    0 Thread(s)

    SLiding Doors CSS Buttons with three images?

    Hi all,

    I am currently looking for a method to design link buttons with three images instead of two.

    Here are examples for methods with two images:

    Is it possible to cut off the left corner as well and wrap it in another span? I have tried it, but without much success. The button sometimes breaks in FF depending on its outer containers, floats, etc.

    and in IE 6 and 7 it looks weird as well.

    Here it is:


    HTML Code:
    <a class="button" href="#"><span>some caption</span><span class="btn_right"></span></a>
    .button {
    background: transparent url(../img/button_left.png) no-repeat left top;
    height: 24px;
    a.button span.btn_right{
    background: transparent url(../img/button_right.png) no-repeat;
    height: 50px;
    margin-left: 0px!important;

    a.button span{
    background: transparent url(../img/button_middle.png) repeat-x;
    padding: 6px 5px;
    margin: 0px 0px 0px 8px!important;
    color: #fff;
    height: 24px;

    Attached are the images I used.

    Any help is greatly appreciated!
    Attached Files Attached Files


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts