Module «btn-text-up». On hover text of the button will slide up.

Демо:

https://codepen.io/ildar-meyker/pen/zYeRjKY

Плагины:

Подключение:

//

Разметка:

//

<a href="#" class="btn-text-up w-100">
    <span class="btn-text-up__text">Все мероприятия</span>
    <span class="btn-text-up__text">Все мероприятия</span>
</a>

Стили:

//

.btn-text-up {
    display: block;
    padding: 0 calc(16 / 22) + em;
    height: 9.2rem;
    border-radius: 2rem;
    background: #333;
    font-size: 2.2rem;
    line-height: 9.2rem;
    text-align: center;
    overflow: hidden;
    color: #fff;

    &__text {
        transition: all 0.4s;
        display: block;
        position: relative;
        height: 100%;
        top: 0;
    }

    &:hover {
        .btn-text-up__text {
            top: -100%;
        }
    }
}

Инициализация:

//