anchor based mouse hover effect : a.hover « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. a.hover

anchor based mouse hover effect

     
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>
    <style rel="stylesheet" type="text/css">
/* begin Button */
.Button
{
  display:inline-block;
  width: auto;
  outline:none;
  border:none;
  background:none;
  line-height:27px;
  margin:0;
  padding:0;
  overflow: visible;
  cursor: default;
  text-decoration: none !important;
  z-index:0;
}

.Button .btn
{
  display:block;
  position:relative;
  float:left;
  height: 27px;
  overflow:hidden;
  white-space: nowrap;
  width: auto;
  color: #000000;
}

.Button .btn .t
{
  display:block;
  height: 27px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  white-space: nowrap;
  text-align: left;
  padding: 0 9px;
  line-height: 27px;
  text-decoration: none !important;
}

input, select
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
}

.Button .hover, .Button:hover
{
  color: #000000;
  text-decoration: none !important;
}

.Button .active
{
  color: #F6F9EC;
}

.Button .btn .l, .Button .btn .r
{
  display:block;
  position:absolute;
  z-index:-1;
  height: 81px;
  background-image: url('images/Button.png');
}

.Button .btn .l
{
  left:0;
  right:11px;
}

.Button .btn .r
{
  width:415px;
  right:0;
  clip: rect(auto, auto, auto, 404px);
}

.Button .btn.hover .l, .Button .btn.hover .r, .Button .btn:hover .l, .Button .btn:hover .r
{
  top: -27px;
}

.Button .btn.active .l, .Button .btn.active .r
{
  top: -54px;
}


/* end Button */




    </style>
</head>
<body>

                                  
                                  <p>
                                        <a class="Button" href="">
                                           <span class="btn">
                                              <span class="l">hover</span>
                                              <span class="r">b</span>
                                              <span class="t">Join&nbsp;Now!</span>
                                          </span>
                                        </a>
                                  </p>
</body>

</html>








Related examples in the same category

1.a:hover text-decoration:underline;
2.a:hover background-color:#ccffff;
3.a:hover, a:active text-decoration: underline overline;
4.Link visted hover
5.Link visted hover active
6.Link visted hover active focus
7.a:hover text-decoration:underline; background-color:#ccffff;
8.A link with a title attribute - hover over the link to see the tooltip appear
9.a:hover text-decoration: none;
10.a:hover color: #369;
11.a:hover background: inherit;
12.Update image while mouse hover
13.a:hover {color: red; text-decoration: underline;}
14.Anchor with solid background, and hover effect
15.Hover Anchor Style inside a LI
16.Change Anchor underline decoration when mouse hover
17.Change background position for anchor when mouse hover
18.a:hover color: #B29B35;
19.a:hover color: yellow;