Кнопка №13

Оцените
3
3 оценки
    • 12+
    • 36+
    • 29+
    • 23+
    • 9+
    • 36+
    • 95+
    • 24+
    • 9+
    • 3+
    • 37+
Демо
  • 3,66 КБ
  • HTML, CSS
  • Кнопка
  • Лицензия MIT
HTML
<a class="redalert-btn" data-title="Красная кнопка">Красная кнопка</a>
CSS
.redalert-btn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
    background-color: #080808;
    color: #6b778400;
    text-align: center;
    position: relative;
    height: 60px;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    -webkit-box-shadow: 0px 0px 2px 4px #0d0e0d, 2px 4px 2px 2px #292c2a, 2px 0px 2px 2px #222423, -2px 4px 2px 2px #2b3230;
    -moz-box-shadow: 0px 0px 2px 4px #0d0e0d, 2px 4px 2px 2px #292c2a, 2px 0px 2px 2px #222423, -2px 4px 2px 2px #2b3230;
    box-shadow: 0px 0px 2px 4px #0d0e0d, 2px 4px 2px 2px #292c2a, 2px 0px 2px 2px #222423, -2px 4px 2px 2px #2b3230;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    z-index: 1;
    font-size: 12px;
    line-height: 1em;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
}
.redalert-btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: attr(data-title);
    position: absolute;
    z-index: -1;
    background-color: #7a3131;
    color: #bf8d8d;
    text-shadow: 0px 1px 1px #7e1629, 0px 0px 6px #ff9696;
    font-weight: bold;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 10px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    -webkit-box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e130600;
    -moz-box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e130600;
    box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e130600;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
}
.redalert-btn:hover::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #dfc1c1;
    background-color: #a54343;
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e1306aa;
    -moz-box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e1306aa;
    box-shadow: inset 0px -5px 10px #6e1306, inset -3px -5px 14px #6c190e, inset -10px -7px 22px #4e2d2d, 0 6px 0 #501616, -1px 3px 3px 2px #461111, 1px 3px 3px 3px #4a1a1a, 0 5px 40px #6e1306aa;
}

В этом фрагменте кода представлена визуально привлекательная кнопка с уникальным визуальным эффектом, созданным с помощью HTML и CSS. В основе этого дизайна лежит использование теней для улучшения внешнего вида кнопки, превращая её не только в функциональный элемент, но и в произведение искусства. CSS свойства для box-shadow тщательно настроены для создания многоуровневого эффекта тени, который придает кнопке глубину и объем. Игра теней не ограничивается только внешними краями; она распространяется и внутрь кнопки, создавая эффект внутренней тени, который добавляет общей привлекательности.

Использование CSS переходов гарантирует, что кнопка реагирует на взаимодействия пользователя, такие как наведение курсора, плавно изменяя свой внешний вид. Это взаимодействие не ограничивается простым изменением цвета или размера, но представляет собой сложное преобразование, включающее корректировки масштаба и интенсивности тени. Такие детали делают кнопку более интерактивной и привлекательной, побуждая пользователей нажимать на неё не из необходимости, а из любопытства и увлечения её дизайном.

Кроме того, реализация CSS псевдо-элементов добавляет еще один слой сложности и креативности. Используя ::after, дизайн вводит дополнительный текст и стилизацию, которые появляются поверх кнопки, дополнительно обогащая визуальный опыт. Эта техника демонстрирует продвинутое понимание CSS, используя его возможности для создания сложных визуальных эффектов, которые улучшают элементы пользовательского интерфейса за пределами их базовой функциональности.

Меню