button hover animation

button hover animation

by ken tsai

HTML

<ul>
<li>
<a class="btn-transparent" href="">
                        <span class="hover-out"><span class="hover-out_i">DEMO LINK 1</span></span>
                        
                        <span class="hover"><span class="hover_i">DEMO LINK 2</span></span>
                    </a>
                    </li>

CSS

ul{
  list-style: none;
}

ul li {
  display:block;
   height: 100px;
}
ul li a{
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 10px;
    text-transform: uppercase;
    font-family: "futura-demic-reg",Arial,sans-serif;
    letter-spacing: 2px;
    color: #000;
    overflow: hidden;
    position: relative;
    -moz-transition: border-color 0.4s ease;
    -o-transition: border-color 0.4s ease;
    -webkit-transition: border-color 0.4s ease;
    transition: border-color 0.4s ease;
}
/* 一開始不要秀讓第二層不要閃一下*/
.hover{
  display:none;
}
.hover{
   position: absolute;
        display: block;
        left: 0;
        top: -1px;
        width: 100%;
        height: 100%;
        padding: 1px 0;
        background: #e28000;
        z-index: 4;
        -moz-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-out;
        -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        -webkit-animation: hoverOut 0.3s ease 1 forwards;
        -moz-animation: hoverOut 0.3s ease 1 forwards;
        -o-animation: hoverOut 0.3s ease 1 forwards;
        animation: hoverOut 0.3s ease 1 forwards
}

.hover_i{
  position: relative;
        display: inline-block;
        -moz-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
       ...