• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Создать эффект 3D-нажатие кнопки на CSS (Создание трехмерной нажимаемой кнопки с использованием CSS)
Создать эффект 3D-нажатие кнопки на CSS
Kosten
Дата: Воскресенье, 10.06.2018, 22:33 | Сообщение 1
Администраторы
Сообщений:17015
Награды: 55


Отличное решение для размещенее кнопки на сайте в формате 3D, под светлый или темный дизйн сайте, где присутствует оригинальный эффект при нажатие. Стили CSS можно использовать, чтобы по-настоящему замаскировать прозрачную ссылку и создать потрясающую кнопку «призыв к действию» как в случае с нашей трехмерной нажатой кнопкой здесь. Он использует псевдо-элемент CSS2, чтобы добавить более низкую сторону 3D к ссылке, а тени CSS3 и переход к завершению внешнего вида.

Чтобы преодолеть серьезные ограничения Google Chrome и Safari во время написания, не поддерживая переходы CSS3 на псевдоэлементы, мы используем метод «наследовать», как описано здесь , поэтому трехмерная сторона кнопки анимируется, когда пользователь нажимает на кнопку кнопка.

Рассмотрим дизайн по умолчанию:



Здесь при клике на кнопку:



3D-нажатие кнопки

HTML

Код
<a href="http://zornet.ru/" class="zornsafuloplasen">ZORNET.RU</a>


CSS:

Код
a.zornsafuloplasen {
    background: darkred;
    color: white;
    text-decoration: none;
    font: bold 27px Arial;
    position: relative;
  top: 0;
    bottom: -12px;
  margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a.zornsafuloplasen, a.zornsafuloplasen:after {
    display: inline-block;
    padding: 9px 14px;
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 7px/14px;
    border-radius: 7px/14px;
    outline: none;
}

a.zornsafuloplasen:after {
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit;
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c;
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

a.zornsafuloplasen:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835;
}

a.zornsafuloplasen:active {
    top: 12px;
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}


Обратите внимание, что по умолчанию «глубина» 3D-эффекта составляет 12 пикселей. Если вам нужно увеличить или уменьшить это значение, измените значение «12px», которое происходит 3 раза в CSS.

Демонстрация
Прикрепления: 5512992.png(7.6 Kb) · 2392392.jpg(11.4 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Создать эффект 3D-нажатие кнопки на CSS (Создание трехмерной нажимаемой кнопки с использованием CSS)
  • Страница 1 из 1
  • 1
Поиск: