.: CSS Gallery :.
Rollover Buttons made with CSS, no JavaScript or images.
EXAMPLE:
XHTML:
<p class="w3cbutton"><a href=""><span class="w3c">w3c</span><span>xhtml 1.0</span></a></p>
<p class="w3cbutton"><a href=""><span class="w3c">w3c</span><span>css</span></a></p>
<p class="w3cbutton"><a href=""><span class="w3c">w3c</span><span>rss/xml</span></a></p>
<p class="w3cbutton"><a href=""><span class="w3c">w3c</span><span>section 508</span></a></p>
CSS:
/* buttons */
.w3cbutton {
margin-top: 1px;
width: 140px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding: 0 3px 0 0;
}
.w3cbutton a {
display: block;
width: 140px;
}
.w3cbutton a:link,
.w3cbutton a:visited,
.w3cbutton a:hover {
background-color: #405081;
color: #C3CBE0;
text-decoration: none;
}
.w3cbutton a:link,
.w3cbutton a:visited {
border-top: 1px solid #cecece;
border-right: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
border-left: 1px solid #cecece;
}
.w3cbutton a:hover {
border-top: 1px solid #4a4a4a;
border-right: 1px solid #cecece;
border-bottom: 1px solid #cecece;
border-left: 1px solid #4a4a4a;
}
.w3cbutton span.w3c {
padding: 0 8px .2em;
background-color: #C3CBE0;
color: #344015;
border: 1px solid #344015;
}
Last updated:
Wednesday, 27-Feb-2008 03:13:37 MST
© copyright: wouter's designs.
This document may not be translated, duplicated, redistributed or otherwise appropriated.