2024-03-22 22:16 Кнопки

Кнопка с выдвижным фоном при наведении на тильде

Кнопка со стрелкой и выдвигающимся фоном при наведении в Тильде.

Инструкция:

1. Cоздаем зеро блок, добавляем элемент кнопка и присваиваем класс .cubebtn

2. Настраиваем все параметры кнопки кроме фона

3. Создаем блок Т123

4. Добавляем код

5. Редактируем параметры в коде. добавляем иконку в код ссылкой.

Иконку можно загрузить в блок изображение и скопировать ее url.

<!--кнопка с анимацией https://cubeteam.ru -->

<style>
.cubebtn .tn-atom:before {
    content: '';
    width: 60px;
    height: 60px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    /*заменяем в url изображения иконки на свою*/
    background: url(https://static.tildacdn.com/tild3166-6465-4530-a635-363036633532/Frame_603.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}
.cubebtn .tn-atom:after {
    content: '';
    width: 60px;
    height: 60px;
    /*устанавливаем цвет фона под иконкой*/
    background-color: #404040;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    left:0;
    z-index: -1;
    transition: all 0.3s ease-in-out;
    border-radius: 100px;    
}
.cubebtn .tn-atom {
    text-align:left;
    padding-right: 30px;
    
}
.arrow-btn:hover .tn-atom:after {
    width: 100% !important;
}
.arrow-btn:hover .tn-atom:before {
    padding-left: 20px;
    margin-right: -10px;
}

.arrow-btn {
    width: fit-content !important;
}
</style>

Команда Cubeteam