Sunday, November 28, 2010

Simple link rollover using css

Creating  a simple image rollover using css is easy and great to use. It can be used in menus and banners and else where with a few modification.
For example if you you want to create a css menu button

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple link rollover using css</title>
    <style type="text/css">
        a
        {
            background: #0099CC;
            color: #FFFFFF;
            display: block;
            padding: 4px;
            text-align: center;
            text-decoration: none;
            width: 99px;
        }
        a:hover
        {
            background: AliceBlue;
            color: #000;
        }
    </style>
</head>
<body>
    <a href="#">Click Me</a>
</body>
</html>
 
you can even use a image instead of just color. To do so just append the following to background.

a 
{
    background: url(image-normal.png);
}
and

a:hover 
{
   background: url(image-hover.png);
}
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)