Results 1 to 4 of 4

Thread: css based button

  1. #1
    Join Date
    Aug 2007
    Location
    Portland, Maine
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css based button

    hi guys,

    I found somewhere this css and I adapted so it will render a round corners button by using a div, an anchor and a span element.
    in order to get the 3d look, the anchor uses "bgbutton.gif" as a background image, tiled horizontally.


    html code:
    <div class="button">
    <a href="#"><span>caption</span></a>
    </div>

    css:
    div.button{
    float:left;
    }
    div.button a {
    display:block;
    position:relative;
    border-width:1px 0;
    border-color:#ccc;
    border-style:solid;
    color:#555;
    text-decoration:none;
    margin:4px 1px;
    background-image: url(bgbutton.gif);
    background-repeat: repeat-x;
    background-position: left center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    letter-spacing:0px;
    }

    div.button a span {
    display:block;
    position:relative;
    margin:0 -1px;
    border-width:0 1px;
    border-color:#ccc;
    border-style:solid;
    padding:3px 8px;
    }

    div.button a:hover {
    border-color:#aaa;
    color:#333;
    }

    div.button a:hover span {
    border-color:#aaa;
    }

    image file:


    it should look like this: http://www.webfixtech.com/repository/cssbutton/

    enjoy and good luck!

  2. #2
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    This is great - I love it.

    However, I'm having trouble getting the layout to look the same in IE, FF and Safari.

    FF - looks great
    IE - they appear to be taking up the entire <td> space...?
    Safari - one button insists on lining up next to another despite having <p>s and <br>s etc... tried adding <style="display:inline"> to the divs -- I am wondering if it has to do with the float properties...

    Does anyone have any answers? I'm about to leave for day and will come back with more details if anyone needs them Thanks!

  3. #3
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    page code:


    <tr>
    <td colspan="2"><br /><br /><br /><div align="right">
    <asp: asp stuff here />
    </div>
    <div id="buttontable" align="right">
    <table><tr><td>
    <P></P>
    <div class="button">
    <p><a href="#"><span> Add To Bag</span></a></p>

    </div><br/><br/>
    <div class="button">
    <a href="#"><span> CONTINUE SHOPPING </span></a>
    </div>
    <P>&nbsp;</P><br/>
    <div class="button">
    <a href="#"><span>Add To Wish List</span></a>
    </div></td></tr></table>

    </td>
    </tr>



    in the css:


    div.button{
    float:right;
    }
    div.button a {
    display:block;
    position:relative;
    border-width:2px 0;
    border-color:#ccc;
    border-style:solid;
    color:#990033;
    text-decoration:none;
    margin:11px 4px;
    background-image: url(site_images/bgbutton.gif);
    background-repeat: repeat-x;
    background-position: left center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:100;
    letter-spacing:0px;
    text-align:center;

    }

    div.button a span {
    display:block;
    position:relative;
    margin:0 -1px;
    border-width:0 2px;
    border-color:#aaa;
    border-style:solid;
    padding:4px 16px;
    }

    div.button a:hover {
    border-color:#A57C8A;
    color:#333;
    }

    div.button a:hover span {
    border-color:#A57C8A;
    }


    /*table I added to hopefully align correctly but doesn't */
    #buttontable td {
    width:250px;
    font-family: Verdana,Sans-Serif,Arial;
    vertical-align: top;
    font-size: 12px;
    height: 16px;
    align: right;

    }

    --------

    in IE - either all the buttons are the same length and don't align right (Mac) or - the CONTINUE SHOPPING button aligns left of the other two and actually wraps the two words so is a taller button (PC). Ugh! HELP

    Thanks in advance if you can help me here.
    Last edited by keltoid; 02-13-2009 at 07:22 PM.

  4. #4
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    is it the < span > element causing probs in IE??

Bookmarks

Posting Permissions

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