css3 鼠标hover事件背景颜色渐变

来源：互联网发布：java 二进制转字符串编辑：程序博客网时间：2024/05/18 01:24

由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。

运行的效果图是这样的：

这是全部的代码，直接复制走就可以运行了。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style type="text/css">            *{margin: 0; padding: 0;}            .container{                margin: 0 auto;                 padding-top: 30px;                 width: 1000px;            }            .btn{                display: inline-block;                 padding: 0 30px;                 width: auto;                 height: 35px;                 font: 14px/35px 'microsoft yahei';                 color: #fff; border: 0;                 border-radius: 3px;                 text-align: center;                 cursor: pointer;                 -webkit-transition: all .5s;                 -moz-transition: all .5s;                 -ms-transition: all .5s;                 -o-transition: all .5s;                 transition: all .5s;            }            .blueBtn{                background: #5dcbff;            } /*蓝色按钮*/            .blueBtn:hover{                background: #40b6ee;            }            .orangeBtn{                background: #ff5700;            }/*橙色按钮*/            .orangeBtn:hover{                background: #e25d18;            }            .violetBtn{                background: #6680ff;            }/*紫色按钮*/            .violetBtn:hover{                background: #425de0;            }            .grayBtn{                background: #999;            }/*灰色按钮*/            .grayBtn:hover{                background: #7f7f7f;            }        </style>     </head>    <body>        <div class="container">            <span class="btn blueBtn">蓝色按钮</span>            <span class="btn orangeBtn">橙色按钮</span>            <span class="btn violetBtn">紫色按钮</span>            <span class="btn grayBtn">灰色按钮</span>        </div>    </body></html>

阅读全文

0 0