Кнопка-перевертыш с 3D-эффектом

Кнопка-перевертыш с 3D-эффектом

В спокойном состоянии кнопка выглядит обычно, в стиле плоского дизайна. Однако при наведении на нее мыши, происходит переворачивание с 3D-эффектом. Как добиться такого эффекта, вы сейчас узнаете.

HTML-разметка состоит из двух строчных тегов: a и span. Ссылка a — это сама кнопка, а тег span нужен для стилизации слова Button.

<a href="#"><span>Button</span></a>

Тег body задает общие стили для страницы и заодно служит flex-контейнером для позиционирования кнопки.

body{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    display: flex;/*flexbox сетка*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*растянуть по вертикали*/
    background: #ffd600;/*цвет фона*/
}
a{
    position: relative;/*относительное позиционирование*/
    padding: 30px 60px;/*поля вокруг текста*/
    background: #bf360c;/*цвет кнопки*/
    color: #fff;/*цвет текста*/
    text-transform: uppercase;/*заглавные буквы*/
    font-family: sans-serif;/*название шрифта*/
    text-decoration: none;/*без подчеркивания*/
    letter-spacing: 4px;/*межбуквенное пространство*/
    transform-style: preserve-3d;/*позиционирование в 3D-пространстве*/
    transition: ease-in-out 2s;/*плавность эффекта*/
    border-radius: 60px;/*скругление углов*/
}

Кнопка-перевертыш с 3D-эффектом

При наведении мыши, кнопка совершает поворот вокруг своей оси на 360 градусов.

a:hover{
    transform: rotateX(360deg);/*поворот на 360*/
}

Кнопка-перевертыш с 3D-эффектом

Текст на кнопке совсем не адаптирован для 3D и смотрится немного странно при повороте. Придадим тексту перспективу и 3D-эффект.

a span{
    display: block;/*отобразить как блочный элемент*/
    font-weight: bold;/*жирный шрифт*/
    transform-style: preserve-3d;
    transform: perspective(100px) translateZ(20px);/*отслоение текста от кнопки*/
}

С помощью стилизации псевдоэлементов before и after, мы добьемся визуального объема у кнопки. Сделаем белую обводку кнопки и поместим ее спереди на верхний слой.

a:before{
    content: '';
    position: absolute;/*абсолютное позиционирование*/
    top: 4px;/*позиция сверху*/
    left: 6px;
    right: 6px;
    bottom: 4px;
    border: 2px solid #fff;/*белая рамка*/
    transform-style: preserve-3d;
    transform: perspective(500px) translateZ(15px);
    border-radius: 60px;
}

Кнопка-перевертыш с 3D-эффектом

Вторую белую рамку поместим позади кнопки на нижний слой.

a:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid #fff;
    transform-style: preserve-3d;
    transform: perspective(500px) translateZ(-15px);
    border-radius: 60px;
}

Кнопка-перевертыш с 3D-эффектом

Посмотрите пример на CodePen

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Проверьте также
Close
Back to top button