18 Simple 3D link button effect
HTML
<a href="#">LINK</a>
CSS
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
19 CSS buttons with mouseover effects
CSS
div#buttonA {
margin-left: 10px;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 8pt;
color: #fcfcd5;
font-weight: bold;
list-style-type: none;
height: 24px;
width: 150px;
margin: 2px;
text-align:center;
}
div#buttonA a {
display: block;
text-decoration: none;
font-weight: bold;
border-width: 6px;
}
div#buttonA a:link {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:visited {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:hover {
font-weight: bold;
color: #fdd017;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:active {
font-weight: bold;
color: red;
background-color: #fcfcd5;
border-style: inset;
}
HTML
<div id="buttonA">
<a href="index.htm" onmouseover="window.status='Home page';return true;" onmouseout="window.status='Elegant Solutions';return true;">Home page</a>
</div>
This repeats for the other buttons.
20 Table that highlights lines on mouseover
HTML
There are more entries in the table than shown – but you get the idea.
CSS
#hilite-table
{
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#hilite-table th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: green;
border-top: 4px solid green;
border-bottom: 1px solid green;
border-right: 1px solid #f5f5dc;
border-left: 1px solid #f5f5dc;
color: gold;
font-weight: bold;
}
#hilite-table td
{
padding: 8px;
background: #f5f5dc;
border-bottom: 1px solid green;
color: green;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
vertical-align: top
}
#hilite-table tr:hover td
{
background: green;
color: gold;
font-weight: bold;
}
Have a happy New Year.
By the way: anyone looking for an experienced technical writer or Web designer, contact me at trevor@itech-ed.com.