CSS Кнопка №18 - пример кода

Демо

3,14 КБ
HTML, CSS
Кнопка
Лицензия MIT

Код
Редактор

HTML

<button class="game-button">Принять</button>

CSS

.game-button {
    font-family: Arial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: 0;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    font-family: "Carter One", sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    background: -webkit-repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
    background: -moz-repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
    background: -o-repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
    background: repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
    -webkit-box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid rgba(40, 117, 29, 0.5);
    text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
    border-top: 3px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 8px 15px 10px;
}
.game-button:hover {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 2px;
    -webkit-box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
}
.game-button::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    height: 10%;
    position: absolute;
    width: 40%;
    background: #fff;
    right: 13%;
    top: -3%;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;
}
.game-button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    height: 10%;
    position: absolute;
    width: 5%;
    background: #fff;
    right: 5%;
    top: -3%;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;
}

HTML
CSS

Этот фрагмент кода посвящен стилизации кнопки с использованием HTML и CSS, делая её визуально привлекательной и интерактивной. Кнопка, обозначенная классом «game-button», это не просто элемент для клика, она создана, чтобы привлекать внимание и поощрять взаимодействие.

В части CSS внешний вид кнопки тщательно проработан. Использование градиентов, теней и определенного шрифта улучшает её внешний вид, делая её не только функциональным элементом, но и частью эстетики страницы. Градиенты создают живой фон, переходящий между оттенками зеленого, что придает кнопке яркий, динамичный вид. Магия происходит с свойством «box-shadow», создающим ощущение глубины за счет нескольких слоев теней. Этот эффект тени заставляет кнопку казаться, будто она отрывается от страницы, добавляя 3D вид, который одновременно современный и привлекательный.

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