SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    amsterdam
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Control (simple) button lay out from CSS

    Dear list participants,
    In the project Iím doing I should like to control button lay out (text in a simple box with rollover-effect) from a style sheet.

    Is there a way to represent <a href >BUTTONTEKST</a> or <a href class="button">BUTTONTEKST</a> as a button? Preferably a secure way concerning browser compatibility (tareget browsers, ie5+, mac-ie5, mac-safari and opera7).

    Can anybody help me or point me a good source?

    Thanks a lot,
    Regards,
    Igor

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this could work:

    Code:
    #sidebar a{
    	/*/*/padding:3px;
    	display:block;
    	border:2px dotted #CCC;
    	text-decoration:none;
    	line-height:1em;
    	width:160px;/**/
    }
    /*defines my default link and visited link styles*/
    #sidebar a:link, #sidebar a:visited{
    	color:#666;
    }
    /*defines my hover and active link styles*/
    #sidebar a:hover, #sidebar a:active{
    	color:#FFFFFF;
    	background-color:#CC0000;
    	border:2px solid #000;
    }
    Degrades well in IE 6, Firefox 9.2, and Opera 7.5. Older browsers I have accounted for to some degree with the the /*/*/property:value/**/ notation. Basically, to make your link in CSS turn into a "button" you need to use this part of code:

    Code:
    #sidebar a{
    	/*/*/
    	display:block;
    }
    Display declared in block tells MSIE 6 to make the entire link clickable like a button would do. As with CSS, there might be other way to do it, but like I said, modern browsers, this degrades well. Of course, you need accompanying HTML to make this work.

    Hope this helps. Paul, feel free to critique me if you feel the need, lol.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. This will give you a button effect without using images.
    http://alistapart.com/articles/rollovers/

    2. This is how to do css rollover buttons with no preloader (excellent idea, really easy to do and works beautifully across browsers)
    http://wellstyled.com/css-nopreload-rollovers.html

    3. This is a more advanced version of the tabs in the site above
    http://alistapart.com/articles/slidingdoors/
    There's a second part to this article that expands further but since you didn't ask about tabs I'll leave you to have a rummage for it. It's not hard to find.

    Good luck,
    John

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Igor,

    This isn't what you want but I thought it worth mentioning as we're talking rollovers here

    This is the only way to achieve pre-loaded rollovers without flicker and without the ie hourglass (which all other method fail at).

    http://www.pmob.co.uk/temp/cssrollover4.htm

    Its not pretty but it works very well. I know its not what you wanted but it seemed like it was good to have a reference to it here for completeness.

    Paul


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
  •