正在加载....
厦门网站建设-世敏网络科技
  • 当前位置: 首页 > 建站百科 > 网站建设
  • CSS3线性动画—按钮悬停效果

    时间:2019-05-24 浏览量:

    CSS3线性动画—按钮悬停效果

    CSS3线性动画—按钮悬停效果(图1)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>按钮悬停效果</title>
    
    <style>
    html,body{
      height:100%;
      background:#ffebff;
    }
    body{
      text-align:center;
    }
    body:before{
      content:'';
      height:100%;
      display:inline-block;
      vertical-align:middle;
    }
    button{
      background:#fff;
      color:#f90;
      border:none;
      position:relative;
      width:300px;
      height:60px;
      font-size:1.6em;
      padding:0 2em;
      cursor:pointer;
      transition:800ms ease all;
      outline:none;
    }
    button:hover{
     
    }
    button:before,button:after{
      content:'';
      position:absolute;
      top:0;
      right:0;
      height:2px;
      width:0;
      background: #1AAB8A;
      transition:400ms ease all;
    }
    button:after{
      right:inherit;
      top:inherit;
      left:0;
      bottom:0;
    }
    button:hover:before,button:hover:after{
      width:100%;
      transition:800ms ease all;
    }
    
    </style>
    </head>
    <body>
    
    <button>xmsmwl.cn</button>
    
    </body>
    </html>


    加载中~

    相关推荐

    RELATED RECOMMEND

    您已成功复制微信号,去微信立即添加好友!

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?