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

Демо

2,63 КБ
HTML, CSS
Кнопка
отправить
Лицензия MIT

Код
Редактор

HTML

<a class="btn-old-pc" data-title="Отправить">Отправить</a>

CSS

.btn-old-pc {
    font-family: Arial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #080808;
    color: #6b778400;
    text-align: center;
    position: relative;
    width: 120px;
    height: 60px;
    text-decoration: none;
    padding: 10px 20px;
    -webkit-box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    -moz-box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 1;
    font-size: 1em;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
}
.btn-old-pc::after {
    content: attr(data-title);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 2.6em;
    display: block;
    position: absolute;
    z-index: -1;
    background-color: #2a3c44;
    color: #495f64;
    text-shadow: 0px 2px 1px #1a2b2c;
    font-weight: bold;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 5px solid #3e5156;
    border-left: 8px solid #213234;
    border-right: 8px solid #3c3836;
    border-bottom: 12px solid #101b1c;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    opacity: 1;
    -webkit-box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    -moz-box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}
.btn-old-pc:hover::after {
    opacity: 1;
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97);
    border-top: 8px solid #26363a;
    border-bottom: 9px solid #101b1c;
    border-right: 8px solid #2b2725;
    background-color: #1d323b;
    color: #35494e;
    -webkit-box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
    -moz-box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
    box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
}

HTML
CSS

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

Начиная с HTML, здесь есть элемент ссылки, стилизованный под кнопку. Это не просто кнопка; она стилизована с помощью класса .btn-old-pc и содержит атрибут данных, data-title, со значением «Отправить». Эта изобретательская настройка позволяет внешнему виду и метке кнопки динамически изменяться с помощью CSS, делая кнопку не только интерактивной, но и интегрированной с её содержимым.

Погружаясь в CSS, именно здесь происходит магия. Класс .btn-old-pc применяет кучу стилей, чтобы имитировать вид кнопки старого ПК. У неё темный фон, эффекты тени для добавления глубины и цвет текста, напоминающий о старых мониторах с зеленым текстом на черном фоне. Также есть псевдоэлемент ::after, который использует атрибут data-title для отображения текста «Отправить» в стиле, который кричит о ретро-вычислениях. Этот текст даже меняет свой внешний вид при наведении, обеспечивая удовлетворяющую обратную связь, которая одновременно визуальная и ностальгическая.

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