按鈕翻滾的CSS

CSS

.textbutton {
display:block;
    line-height: 51px;
    color: #fff;
    text-align: center;
    letter-spacing: -.5px;
    font-size: 17px;
    width: 100%;
}
.textbutton {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    -webkit-transform: rotateX(0) translateZ(25px) scale(.975);
    transform: rotateX(0) translateZ(25px) scale(.975);
    background: #248328;
}
 .textbutton:hover {
    -webkit-transform: rotateX(-90deg) translateZ(25px) scale(.975);
    transform: rotateX(-90deg) translateZ(25px) scale(.975);
    background: #133a15;
}
.textbutton:after {
    content: '成立宗旨與理念';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #133a15;
    -webkit-transform: translateY(-25px) translateZ(-25px) rotateX(90deg);
    transform: translateY(-25px) translateZ(-25px) rotateX(90deg);
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
.textbutton:hover:after {
    background: #248328;
}

HTML

<a href="#" class="textbutton">成立宗旨與理念</a>