Who Does She Think She Is?

Blog Post

Cool CSS Buttons!

Posted by Joni in General

As seen here!

Go to this Live Journal site to grab the code for mouse-over buttons for your XML link. The code snippets are smaller than the graphics files and degrade nicely as a text link in non-CSS compliant browsers! You can see that in a side by side comparison with their graphical counterparts, there’s really no difference at all!


With CSS
XML RDF

With Graphics
[XML]  [RDF]

The RDF icon I recreated using this bit of text:

In your document HEAD or STYLESHEET:

.rdf_button {
color: FFFFFF;
background-color: #0066FF;
border-color: #0066FF;
border-style: outset;
font-size: 9px;
font-weight: #600px;
font-family: verdana, tahoma, arial, sans-serif;
text-decoration: none !important;
margin: 2em 0em 0em 0em;
padding: 0em 0.5em 0em 0.5em;
border-width: 2;
}
.rdf_button:visited {
color: FFFFFF;
background-color: #0066FF;
}
.rdf_button:hover {
background-color: #66CCFF;
color: #000080;
}
.rdf_button:active {
border-style: inset !important;
}

In your HTML document/template:

<A TITLE=”RDF” HREF=”rdf/” CLASS=”rdf_button”>RDF</A>

I found with the original code as given for the XML button since there was no “visited” pseudo-class, my buttons showed up with white backgrounds and not their default orange and blue backgrounds. Therefore, I created two more pseudo classes (:visited) and declared background and color properties for each.

Leave a Comment

Your email address will never be published or shared and required fields are marked with an asterisk (*).