技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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

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

CSS懸停效果按鈕(鼠標移到按鈕上變成其他顏色),是一個非常常見的按鈕效果,今天通過一個簡單的實例來給大家介紹如何用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>
 

execcodegetcode

 

標簽: css  css3  button  懸停效果  hover  按鈕  
  • IT熱文
  • 站長推薦
财神捕鱼128 二分彩 广东十一选五 卖给女人什么东西赚钱 德甲联赛比赛用球 极速快乐十分 在江西省做什么生意哪一行能赚钱 怎么买辽宁十一选五 陕西安康福利彩票中心 南国彩票社区 新疆35选7开奖