12种CSS鼠标滑过按钮悬停效果

12种鼠标滑过后悬停的按钮特效，纯CSS特效无任何javascript，每种特效都可以自由设置颜色、字体大小、动画时间等样式参数，喜欢就收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面head部分的CSS样式比较多，其中用了不同的选择器和C3动画，如：选择器:hover和:nth-child、transform和rotate等，部分代码如下：

.b01_simple_rollover {
    color: #26c7fc;
    border: #26c7fc solid 1px;
    padding: 10px;
    background-color: #ffffff;
}

.b01_simple_rollover:hover {
    color: #ffffff;
    background-color: #26c7fc;
}

/* ### ### ### 02 */
.b02_slide_in {
    overflow: hidden;
    border: #26c7fc solid 1px;
}

.b02_slide_in div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
}

.b02_slide_in div:nth-child(1) {
    color: #26c7fc;
    background-color: #ffffff;
}

.b02_slide_in div:nth-child(2) {
    background-color: #26c7fc;
    transition: top 0.1s ease;
    -webkit-transition: top 0.1s ease;
    -moz-transition: top 0.1s ease;
    top: -50px;
}

.b02_slide_in div:nth-child(3) {
    color: #ffffff;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    opacity: 0;
}

.b02_slide_in:hover div:nth-child(2) {
    top: 0px;
    transition: top 0.1s ease;
    -webkit-transition: top 0.1s ease;
    -moz-transition: top 0.1s ease;
}

.b02_slide_in:hover div:nth-child(3) {
    opacity: 1;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
}

页面的body部分，需要把12个按钮放到不同的容器里即可，代码如下：

<div class="back">
    <div class="button_base b01_simple_rollover">简单翻转</div>
</div>

<div class="back">
    <div class="button_base b02_slide_in">
        <div>普通滑入</div>
        <div></div>
        <div>普通滑入</div>
    </div>
</div>

<div class="back">
    <div class="button_base b03_skewed_slide_in">
        <div>倾斜滑入</div>
        <div></div>
        <div>倾斜滑入</div>
    </div>
</div>

<div class="back">
    <div class="button_base b04_3d_tick">
        <div>立体标注</div>
        <div>立体标注</div>
    </div>
</div>

<div class="back">
    <div class="button_base b05_3d_roll">
        <div>立体翻滚</div>
        <div>立体翻滚</div>
    </div>
</div>

<div class="back">
    <div class="button_base b06_3d_swap">
        <div>立体替换</div>
        <div>立体替换</div>
    </div>
</div>

<div class="back">
    <div class="button_base b07_3d_double_roll">
        <div>立体双翻滚</div>
        <div>立体双翻滚</div>
        <div>立体双翻滚</div>
        <div>立体双翻滚</div>
    </div>
</div>

<div class="back">
    <div class="button_base b08_3d_pushback">
        <div>立体翻牌</div>
        <div>立体翻牌</div>
    </div>
</div>

<div class="back">
    <div class="button_base b09_electric">电动效果</div>
</div>

<div class="back">
    <div class="button_base b10_tveffect">
        <div>电视信号</div>
        <div>
            <div>电视信号</div>
            <div>电视信号</div>
            <div>电视信号</div>
        </div>
    </div>
</div>

<div class="back">
    <div class="button_base b11_3d_jumpback">
        <div>立体回跳</div>
    </div>
</div>

<div class="back">
    <div class="button_base b12_3d_glitch">
        <div></div>
        <div>立体差错</div>
    </div>
</div>