91精品美利坚合众国,h在线看

技術(shù)頻道 - html技術(shù)

CSS懸停效果按鈕一簡單實例（鼠標(biāo)移到按鈕上變成其他顏色）

作者:admin 時間:2019-9-21 17:40:57 瀏覽:

CSS懸停效果按鈕（鼠標(biāo)移到按鈕上變成其他顏色），是一個非常常見的按鈕效果，今天通過一個簡單的實例來給大家介紹如何用css來實現(xiàn)這一效果。

CSS懸停效果按鈕

CSS樣式

按鈕樣式包含以下這些類：

a.jbutton{
  background: transparent url(buttonleft.png) no-repeat top left;
  display: block;
  float: left;
  font: 22px "Tahoma";
  line-height: 49px; /* 這個值+8px應(yīng)該等于按鈕的高度 */
  height: 57px;
  padding-left: 9px; /* 圖像左側(cè)部分 */
  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; /* 在此處將右填充設(shè)置為上面的“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;
}

我們有兩張圖片，按鈕的左邊和右邊。根據(jù)文本的大小，按鈕將展開（最多200像素）。

我還添加了一些文字陰影。

HTML標(biāo)記

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應(yīng)該等于按鈕的高度 */
          height: 57px;
          padding-left: 9px; /* 圖像左側(cè)部分 */
          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; /* 在此處將右填充設(shè)置為上面的“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>