实用的CSS鼠标滑过按钮特效（10种代码篇）
        /* 效果一 */
        .button1{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button1:hover{
            background-color: rgba(255,255,255,0.2);
            border-radius:20px;
css鼠标点击样式        }
        /* 效果二 */
        .button2{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
            overflow:hidden;
            position: relative;
        }
        .button2:hover{
            background-color: rgba(255,255,255,0.2);
        }
        .button2>span{
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button2:hover>span{
            opacity:0;
        }
        .button2::after{
            content:attr(data-text);
            width: 100%;
            height: 100%;
            position: absolute;
            left: -50px;
            top: 0;
            opacity:0;
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button2:hover::after{
            left:0;
            opacity:1;
        }
        /* 效果三 */
        .button3{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
            overflow:hidden;
            position: relative;
        }
        .button3:hover{
            background-color: rgba(255,255,255,0.2);
        }
        .button3>span{
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button3:hover>span{
            opacity:0;
        }
        .button3::after{
            content:attr(data-text);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
            -webkit-transform: translate(-9%, -50%) rotate(-9deg);
                    transform: translate(-9%, -50%) rotate(-9deg);
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button3:hover::after{
            -webkit-transform: translate(0, 0) rotate(0deg);
                    transform: translate(0, 0) rotate(0deg);
            opacity:1;
        }
        /* 效果四 */
        .button4{
            position: relative;
            overflow:hidden;
        }
        .button4 span{
            z-index:2;
        }
        .button4::after{
            content:"";
            width: 100%;
            height: 100%;
            z-index:1;
            opacity:0;
            position: absolute;
            left: 0;
            top:0;
            background-color: rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button4:hover::after{
            opacity:1;
            -webkit-transform: skewX(-180deg) scale(0.5,1);
                    transform: skewX(-180deg) scale(0.5,1);
        }
        /* 效果五 */
        .button5{
            border:none;
            position: relative;
        }
        .button5::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button5:hover::before{
            opacity:0;
            -webkit-transform: scale(1.2,1.2);
                    transform: scale(1.2,1.2);
        }
        .button5::after{
            content:'';
            width:100%;
            height:100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
            background-color: rgba(255,255,255,0.5);
            -webkit-transform: scale(0.5,0.5);
                    transform: scale(0.5,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button5:hover::after{
            opacity:1;
            -webkit-transform: scale(1,1);
                    transform: scale(1,1);
        }
        /* 效果六 */
        .button6{
            border:none;
            position: relative;
        }
        .button6::before{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。