Cool CSS Buttons!

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

GDPR Agreement