Control (simple) button lay out from CSS

[igorf]

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

[rbutler]

Something like this could work:

#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:

#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.

[jfitz]

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

[Paul O'B]

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