CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）

技术频道 - html技术

CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）

作者:admin 时间:2019-9-21 17:40:57 浏览:

CSS悬停效果按钮（鼠标移到按钮上变成其他颜色），是一个非常常见的按钮效果，今天通过一个简单的实例来给大家介绍如何用css来实现这一效果。

CSS悬停效果按钮

CSS样式

按钮样式包含以下这些类：

a.jbutton{
  background: transparent url(buttonleft.png) no-repeat top left;
  display: block;
  float: left;
  font: 22px "Tahoma";
  line-height: 49px; /* 这个值+8px应该等于按钮的高度 */
  height: 57px;
  padding-left: 9px; /* 图像左侧部分 */
  text-decoration: none;
  outline:none;
  color:white;
  cursor:pointer;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  opacity: 1;
  -moz-opacity: 0.99;
}
a.jbutton span{
  background: transparent url(buttonright.png) no-repeat top right;
  display: block;
  padding: 4px 9px 6px 0; /* 在此处将右填充设置为上面的“padding-left”值 */
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a.jbutton:link, a.jbutton:visited{
  color: #F0F0F0; /* 按钮文本颜色 */
}
a.jbutton:hover{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  opacity: 0.8;
  -moz-opacity: 0.8;
}
a.jbutton:hover span{
  color: #FFFFFF;
}

我们有两张图片，按钮的左边和右边。根据文本的大小，按钮将展开（最多200像素）。

我还添加了一些文字阴影。

HTML标记

HTML非常简单：

<a class="jbutton"><span>Ask a question</span></a>

完整HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
    <head>
        <title>JButton</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        a.jbutton{
          background: transparent url(buttonleft.png) no-repeat top left;
          display: block;
          float: left;
          font: 22px "Tahoma";
          line-height: 49px; /* 这个值+8px应该等于按钮的高度 */
          height: 57px;
          padding-left: 9px; /* 图像左侧部分 */
          text-decoration: none;
          outline:none;
          color:white;
          cursor:pointer;
          filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
          opacity: 1;
          -moz-opacity: 0.99;
        }
        a.jbutton span{
          background: transparent url(buttonright.png) no-repeat top right;
          display: block;
          padding: 4px 9px 6px 0; /* 在此处将右填充设置为上面的“padding-left”值 */
          text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }
        a.jbutton:link, a.jbutton:visited{
          color: #F0F0F0; /* 按钮文本颜色 */
        }
        a.jbutton:hover{
          filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
          opacity: 0.8;
          -moz-opacity: 0.8;
        }
        a.jbutton:hover span{
          color: #FFFFFF;
        }
        </style>
    </head>
    <body>
        <a class="jbutton"><span>Ask a question</span></a>
    </body>
</html>