效果图：

当鼠标移入到按钮中时 按钮中的文字 从头到尾向上进行一个翻转切换 当鼠标移出时 同样文字 会向下进行一个 从头到位的顺序进行翻转

html：

css:

      * {
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background: #0099cc;
      }
      .btn {
        background-color: #343434;
        display: inline-block;
        padding: 0.8em 3em 0.8em 3em;
        border-radius: 100px;
        font-family: "Raleway";
        box-shadow: 0 5px 40px rgba(52, 52, 52, 0.5);
        color: white;
        border: none;
        outline: none;
        overflow: hidden;
        font-size: 1.2em;
        position: relative;
        cursor: pointer;
        letter-spacing: 2px;
      }
      .btn.cur {
        transform: translateY(3px);
      }
      .btn-text {
        position: relative;
        display: inline-block;
        overflow: hidden;
      }
      .wrap-text {
        display: inline-block;
      }
      .buildin-text {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        transform: translateY(100%);
      }
      .buildin-text .btn-letter {
        opacity: 0;
      }
      .btn-letter {
        display: inline-block;
        margin: 0em 0.05em;
        position: relative;
        transition: transform 300ms, opacity 300ms ease;
      }

      .current-text .btn-letter:nth-child(1) {
        transition-delay: 49ms;
      }

      .current-text .btn-letter:nth-child(2) {
        transition-delay: 99ms;
      }

      .current-text .btn-letter:nth-child(3) {
        transition-delay: 149ms;
      }

      .current-text .btn-letter:nth-child(4) {
        transition-delay: 199ms;
      }

      .current-text .btn-letter:nth-child(5) {
        transition-delay: 249ms;
      }

      .current-text .btn-letter:nth-child(6) {
        transition-delay: 299ms;
      }

      .current-text .btn-letter:nth-child(7) {
        transition-delay: 349ms;
      }

      .current-text .btn-letter:nth-child(8) {
        transition-delay: 399ms;
      }

      .current-text .btn-letter:nth-child(9) {
        transition-delay: 449ms;
      }

      .current-text .btn-letter:nth-child(10) {
        transition-delay: 499ms;
      }

      .current-text .btn-letter:nth-child(11) {
        transition-delay: 549ms;
      }

      .current-text .btn-letter:nth-child(12) {
        transition-delay: 599ms;
      }

      .current-text .btn-letter:nth-child(13) {
        transition-delay: 649ms;
      }

      .current-text .btn-letter:nth-child(14) {
        transition-delay: 699ms;
      }

      .current-text .btn-letter:nth-child(15) {
        transition-delay: 749ms;
      }

      .current-text .btn-letter:nth-child(16) {
        transition-delay: 799ms;
      }

      .current-text .btn-letter:nth-child(17) {
        transition-delay: 849ms;
      }

      .current-text .btn-letter:nth-child(18) {
        transition-delay: 899ms;
      }

      .current-text .btn-letter:nth-child(19) {
        transition-delay: 949ms;
      }

      .current-text .btn-letter:nth-child(20) {
        transition-delay: 999ms;
      }

      .current-text .btn-letter:nth-child(21) {
        transition-delay: 1049ms;
      }

      .current-text .btn-letter:nth-child(22) {
        transition-delay: 1099ms;
      }

      .current-text .btn-letter:nth-child(23) {
        transition-delay: 1149ms;
      }

      .current-text .btn-letter:nth-child(24) {
        transition-delay: 1199ms;
      }

      .current-text .btn-letter:nth-child(25) {
        transition-delay: 1249ms;
      }

      .current-text .btn-letter:nth-child(26) {
        transition-delay: 1299ms;
      }

      .current-text .btn-letter:nth-child(27) {
        transition-delay: 1349ms;
      }

      .current-text .btn-letter:nth-child(28) {
        transition-delay: 1399ms;
      }

      .current-text .btn-letter:nth-child(29) {
        transition-delay: 1449ms;
      }

      .current-text .btn-letter:nth-child(30) {
        transition-delay: 1499ms;
      }

      .buildin-text .btn-letter:nth-child(1) {
        opacity: 0;
        transition-delay: 49ms;
      }

      .buildin-text .btn-letter:nth-child(2) {
        opacity: 0;
        transition-delay: 99ms;
      }

      .buildin-text .btn-letter:nth-child(3) {
        opacity: 0;
        transition-delay: 149ms;
      }

      .buildin-text .btn-letter:nth-child(4) {
        opacity: 0;
        transition-delay: 199ms;
      }

      .buildin-text .btn-letter:nth-child(5) {
        opacity: 0;
        transition-delay: 249ms;
      }

      .buildin-text .btn-letter:nth-child(6) {
        opacity: 0;
        transition-delay: 299ms;
      }

      .buildin-text .btn-letter:nth-child(7) {
        opacity: 0;
        transition-delay: 349ms;
      }

      .buildin-text .btn-letter:nth-child(8) {
        opacity: 0;
        transition-delay: 399ms;
      }

      .buildin-text .btn-letter:nth-child(9) {
        opacity: 0;
        transition-delay: 449ms;
      }

      .buildin-text .btn-letter:nth-child(10) {
        opacity: 0;
        transition-delay: 499ms;
      }

      .buildin-text .btn-letter:nth-child(11) {
        opacity: 0;
        transition-delay: 549ms;
      }

      .buildin-text .btn-letter:nth-child(12) {
        opacity: 0;
        transition-delay: 599ms;
      }

      .buildin-text .btn-letter:nth-child(13) {
        opacity: 0;
        transition-delay: 649ms;
      }

      .buildin-text .btn-letter:nth-child(14) {
        opacity: 0;
        transition-delay: 699ms;
      }

      .buildin-text .btn-letter:nth-child(15) {
        opacity: 0;
        transition-delay: 749ms;
      }

      .buildin-text .btn-letter:nth-child(16) {
        opacity: 0;
        transition-delay: 799ms;
      }

      .buildin-text .btn-letter:nth-child(17) {
        opacity: 0;
        transition-delay: 849ms;
      }

      .buildin-text .btn-letter:nth-child(18) {
        opacity: 0;
        transition-delay: 899ms;
      }

      .buildin-text .btn-letter:nth-child(19) {
        opacity: 0;
        transition-delay: 949ms;
      }

      .buildin-text .btn-letter:nth-child(20) {
        opacity: 0;
        transition-delay: 999ms;
      }

      .buildin-text .btn-letter:nth-child(21) {
        opacity: 0;
        transition-delay: 1049ms;
      }

      .buildin-text .btn-letter:nth-child(22) {
        opacity: 0;
        transition-delay: 1099ms;
      }

      .buildin-text .btn-letter:nth-child(23) {
        opacity: 0;
        transition-delay: 1149ms;
      }

      .buildin-text .btn-letter:nth-child(24) {
        opacity: 0;
        transition-delay: 1199ms;
      }

      .buildin-text .btn-letter:nth-child(25) {
        opacity: 0;
        transition-delay: 1249ms;
      }

      .buildin-text .btn-letter:nth-child(26) {
        opacity: 0;
        transition-delay: 1299ms;
      }

      .buildin-text .btn-letter:nth-child(27) {
        opacity: 0;
        transition-delay: 1349ms;
      }

      .buildin-text .btn-letter:nth-child(28) {
        opacity: 0;
        transition-delay: 1399ms;
      }

      .buildin-text .btn-letter:nth-child(29) {
        opacity: 0;
        transition-delay: 1449ms;
      }

      .buildin-text .btn-letter:nth-child(30) {
        opacity: 0;
        transition-delay: 1499ms;
      }

      .btn:hover .current-text .btn-letter {
        opacity: 0;
        transform: translateY(-100%);
      }
      .btn:hover .buildin-text .btn-letter {
        opacity: 1;
        transform: translateY(-100%);
      }

js:

 // 获取demo
  var btn = $(".btn");
  var createBtnsMarkup = function createBtnsMarkup() {
    btn.each(function (i, item) {
      var t = $(".btn");
      var btnText = t.text();
      var splitText = btnText.split("");

      t.html("").append(
        '\n\t\t\t\t<span class="btn-text">\n\t\t\t\t\t<span class="wrap-text current-text"></span>\n\t\t\t\t\t<span class="wrap-text buildin-text"></span>\n\t\t\t\t</span>\n\t\t\t',
      );

      for (var J = 0; J < splitText.length; J++) {
        t.find(".wrap-text").append('<span class="btn-letter">' + splitText[J] + "</span>");
      }
    });
  };
  $(document).ready(function () {
    createBtnsMarkup();
  });