Такой стиль анимации для кнопки отлично подойдет пол разные функции. Плюс в том, что она выполнена на чистом CSS, но также при наведении мы изначально видим надпись. Пусть это к примеру будет ВВЕРХ , и только стоит навести курсор, как появляется рисунок виде стрелки, что будет отличным решение для поднятие страницы.1. По умолчанию: 2. При наведение: Установка HTML
Код
<button class="stranitse-averkhu"><span class='acheniye'>Вверх</span><span class="kodemas"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 10h-5l9-10 9 10h-5v10h-8v-10zm11 9v3h-14v-3h-2v5h18v-5h-2z"/> </svg></span></button>
CSSКод
.stranitse-averkhu { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } button { width: 150px; height: 50px; cursor: pointer; display: flex; align-items: center; border: none; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.15); background: #36abff; } button, button span { transition: 200ms; } button .acheniye { transform: translateX(35px); color: white; font-weight: bold; } button .kodemas { position: absolute; border-left: 1px solid #2e93db; transform: translateX(110px); height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; } button svg { width: 15px; fill: #eee; transition: 200ms; } button:hover { background: #36abff; } button:hover svg { transform: scale(1.5); } button:hover .acheniye { color: transparent; } button:hover .kodemas { width: 150px; border-left: none; transform: translateX(0); } button:focus { outline: none; }
Как понимаете, что здесь предоставлен только дизайн кнопки с таким оригинальным эффектом.Демонстрация