neyia
7/17/2018 - 9:15 PM

Simple css animation on hover-over on the button.

Simple css animation on hover-over on the button. Smooth filling of the button with a color.

html.html
content_copyfile_download

<!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>
style.css
content_copyfile_download
.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;
}