css 悬停在按钮上的简单css动画。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 悬停在按钮上的简单css动画。相关的知识，希望对你有一定的参考价值。


<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Css animation button</title>
    </head>
    <body>
        <div class="container">
          <div class="btn-block">
            <a href="javascript:void(0)" class="btn btn-primary">Next step</a>
            <a href="javascript:void(0)" class="btn btn-primary">Last step</a>
      </div>
    </div> 
  </body>
</html>

.container {
    display:                 -webkit-box;
    display:                 -webkit-flex;
    display:                 -ms-flexbox;
    -webkit-box-pack:        center;
    -webkit-justify-content: center;
    -ms-flex-pack:           center;
    justify-content:         center;
    align-item:              center;
    display:                 flex;
}

.btn-block {
    -webkit-justify-content: space-around;
    -ms-flex-pack:           distribute;
    justify-content:         space-around;
    -webkit-box-sizing:      border-box;
    box-sizing:              border-box;
    display:                 -webkit-box;
    display:                 -webkit-flex;
    display:                 -ms-flexbox;
    display:                 flex;
    width:                   30%;
    padding-top:             30px;
}

.btn {
    background-color:   transparent;
    -webkit-transition: all 0.2s ease-out;
    -o-transition:      all 0.2s ease-out;
    transition:         all 0.2s ease-out;
    font-family:        arial, monospace;
    border:             1px solid #00aaff;
    position:           relative;
    padding:            10px 15px;
    color:              #00aaff;
    cursor:             pointer;
    overflow:           hidden;
    display:            block;
    font-size:          14px;
    width:              auto;
    text-decoration:    none;
    font-weight:        600;
    border-radius:      3px;
}

.btn::before,
.btn::after {
    -webkit-transition: all 0.2s ease-out;
    -o-transition:      all 0.2s ease-out;
    transition:         all 0.2s ease-out;
    position:           absolute;
    background-color:   #46c3ff;
    width:              100%;
    height:             100%;
    left:               -100%;
    opacity:            0.5;
    top:                0;
    z-index:            -1;
    content:            '';
}

.btn::after {
    -webkit-transition-delay: 0.2s ease-out;
    -o-transition-delay:      0.2s ease-out;
    transition-delay:         0.2s ease-out;
    opacity:                  1;
}

.btn:hover::before,
.btn:hover::after {
    -webkit-transition: all 0.2s ease-out;
    -o-transition:      all 0.2s ease-out;
    transition:         all 0.2s ease-out;
    left:               0;
}

.btn:hover {
    color: #ffffff;
}

.btn:active {
    background-color: #0096e1;
    color:            #ffffff;
}

以上是关于css 悬停在按钮上的简单css动画。的主要内容，如果未能解决你的问题，请参考以下文章

css 链接和按钮的通用过渡样式为悬停上的链接设置动画

在悬停按钮 CSS 动画后面放置正确格式的图像

CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间

css 按钮悬停动画（Nibbelink）

css 脉冲动画按钮（悬停和焦点）

CSS悬停在初始动画后不起作用