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

Демо

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

Код
Редактор

HTML

<a class="btn-neon">Кнопка</a>

CSS

.btn-neon {
    font-family: Arial;
    border: 2px solid #404040;
    background-color: rgba(70, 70, 70, 0.25);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #565656;
    text-shadow: 0 0 0px transparent;
    font-size: 16px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    padding: 6px 30px;
    line-height: 40px;
    margin: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    cursor: pointer;
}
.btn-neon:hover {
    border: 2px solid #d615c6;
    color: #d615c6;
    text-shadow: 0 0 4px #d615c6;
    -webkit-box-shadow: inset 0 0 6px #d615c6, 0 0 6px #d615c6;
    -moz-box-shadow: inset 0 0 6px #d615c6, 0 0 6px #d615c6;
    box-shadow: inset 0 0 6px #d615c6, 0 0 6px #d615c6;
}

HTML
CSS

Предоставленный фрагмент кода является отличным примером совместной работы HTML и CSS для создания визуально привлекательных элементов на веб-странице, в частности, кнопки с неоновым эффектом. HTML-часть кода довольно проста: используется тег-якорь <a> с именем класса «btn-neon» для представления кнопки. Эта простота в HTML ключева для поддержания читаемости и структуры веб-страницы, позволяя определить фактический вид и поведение кнопки отдельно в CSS.

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

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