|
|
Web Design
|
Making hover buttons using stylesheets
Making a simple set of graphical buttons with a hover effect can be tricky if you don't know HTML and CSS.
Often people use javascript to solve this, which I think is not necessary at all. Here is an
example.
And here is the code that does it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
a.button { background-image: url(01.jpg); width: 96px; height: 32px; background-repeat: no-repeat; font-family: Verdana; font-size: 11px; font-weight: bold; text-align: center; vertical-align: bottom; line-height: 30px; color: #FFFFFF; display: block; text-decoration: none; }
a.button:hover { background-image: url(02.jpg); }
a.button:active { background-image: url(03.jpg); }
</style>
</head>
<body>
<a href="#xvid" class="button">XviD</a>
<a href="#x264" class="button">x264</a>
<a href="#divx" class="button">DivX</a>
<a href="#mpeg" class="button">mpeg</a>
</body>
</html>
|
You may use this code in any way you like.
Website by Joachim Michaelis
|
|
|
|