Rollover with image : Anchor class « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. Anchor class

Rollover with image

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stirct.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pixy Rollover</title>
<style type="text/css">
body {
  font-size: 1.4em;
}

a:link, a:visited {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  color: #000;
  text-decoration: none;
  background: #94B8E9 url(images/button.gif) no-repeat left top;
  text-indent: 50px;
}

a:hover {
 background: #369 url(images/button-over.gif) no-repeat left top;
 color: #fff;
}

</style>
</head>

<body>

<p><a href="#">Button</a></p>

</body>
</html>








Related examples in the same category

1.Pseudo-class Selectors for anchor
2.a:link
3.a:visited
4.a:hover
5.a:active
6.Link visited hover
7.link visited, hover, active
8.link visited, hover, active, focus
9.Set anchor hover in
  • under
    • 10.Set anchor link and visited: a:link, a:visited
    11.Set different color for anchor link and visited link
    12.Set color for anchor link, anchor visited, hover and active
    13.Set different anchor link style for navigation and content
    14.style for email anchor,
    15.Three level nesting for anchor link style setting
    16.Three level nesting for visited link style setting
    17.Three level nesting for visited link style setting for two
    18.Three level nesting for an anchor with id
    19.background image, repeat and position for anchor link hover
    20.background image, repeat and position for anchor link active
    21.Use anchor hover to highlight more than one tags
    22.Add border to anchor when hover
    23.a[href^='http://']:hover
    24.Set cursor for a link
    25.Anchor background-color: blue;
    26.Anchor background-position: top left;
    27.Anchor background-repeat: no-repeat;
    28.Anchor height: 35px;
    29.Anchor display: block;
    30.Anchor float: left;
    31.Anchor font-family: Arial, Helvetica, sans-serif;
    32.Anchor font-size: 12px;
    33.Anchor color: red;
    34.Anchor text-decoration: none;
    35.Anchor text-align: center
    36.Anchor color: #FCEACE;