• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Кнопка в стиле 3D модели при помощи CSS (Кнопка в кубе с дизайн 3D и анимацией на чистом CSS)
Кнопка в стиле 3D модели при помощи CSS
Kosten
Пятница, 26 Февраля 2021 | Сообщение 1
Онлайн
Администраторы
Сообщений:44267
Награды: 70
Иногда нам нужна оригинальная кнопка, скажем виде куба, которая плюс идет прозрачная, где только из дизайна показаны стороны, что можно наблюдать переднее и которая находится позади. Это что то похоже на Minecraft, что больше к такой тематике подойдет. Ведь она идет на чистом CSS, где уже самостоятельно наращиваем так нужный дизайн. Также нужно знать, что здесь прекрасно смотрится анимация, что происходит с наведении курсора на основу материала.



HTML

Код
<button class="kaleos-muketas"><div>ZORNET.RU</div></button>

CSS

Код
.kaleos-muketas {
  -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;
    background: black;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 0 8px 5px;
    box-shadow: -8px 8px 5px rgba(0,0,0,0.5);
    transition: 500ms;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
}

button div {
    width: 142px;
    height: 42px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

button:before {
    height: 42px;
    width: 5px;
    border: 4px solid black;
    background: #ddd;
    content: '';
    position: absolute;
    transform: skewY(-30deg) translateX(-78px) translateY(-42px);
}

button:after {
    width: 135px;
    height: 3px;
    border: 4px solid black;
    background: #bbb;
    content: '';
    position: absolute;
    transform: skewX(-55deg) translateY(26px) translateX(32px)
}

button:focus {
    outline: none;
}

button:hover {
    transform: translateX(5px) translateY(-5px);
    box-shadow: -15px 15px 5px rgba(0,0,0,0.5);
}

Вот на этом установка завершена.

Демонстрация
Прикрепления: 7968018.png (20.9 Kb) · boxed.zip (3.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Кнопка в стиле 3D модели при помощи CSS (Кнопка в кубе с дизайн 3D и анимацией на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: