<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>
    技術頻道導航
    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熱文
    • 站長推薦
    微拍福利