按钮翻转动画css html源码

演示

源码

html

[lv]

<div class="btn-animate btn-animate__flip">
    <span>m.qqzy8.com</span>
    <span>QQ资源吧</span>
</div>

[/lv]

css

[lv]

.btn-animate {
  position: relative;
  width: 130px;
  height: 40px;
  line-height: 40px;
  border: none;
  border-radius: 5px;
  background: #027efb;
  color: #fff;
  text-align: center;
}

.btn-animate__flip {

  & > span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #027efb;
    transition: .3s;
  }

  & > span:nth-child(1) {
    transform: rotateX(90deg);
    transform-origin: 50% 50% -20px;
  }

  & > span:nth-child(2) {
    transform: rotateX(0deg);
    transform-origin: 50% 50% -20px;
  }

  &:hover {
    & > span:nth-child(1) {
      transform: rotateX(0deg);
    }

    & > span:nth-child(2) {
      transform: rotateX(-90deg);
    }
  }
}

[/lv]