Digital-агентство в Москве
Позвонить: +7 926 614-52-02
пн-пт, 10:00 - 19:00

Простая неоновая кнопка с помощью CSS

Приветствую всех читателей в данном блоге. Сегодня мы поговорим о том, как же сверстать такую красивую неоновую кнопку. Казалось бы, что такая штука довольно трудоёмка, однако не тут то было. Используя несколько трюков CSS 3 мы сможем быстро, буквально в 20 строчек создать кнопку. Итак, для начала сделаем разметку нашей кнопки:

<button class="neon">Неоновая кнопка</button>

И собственно говоря это всё что нам нужно. Далее мы будем творить всю магию на CSS.

Давайте определимся с цветом. Я решил выбрать классический розовый оттенок, но можно использовать совершенно любой. Для меня это будет цвет #ff14bd.

Добавляем размер текста к кнопке. Можно использовать пиксели, но я предпочитаю относительные величины, такие как rem:

.neon {
color: #ff14bd;
border: .4rem solid #ff14bd;
border-radius: 1rem;
background: transparent;
font-size: 3rem;
padding: .8rem;
font-family: 'Futura PT';
position: relative;
cursor: pointer;
box-shadow: inset 0 0 0.5em 0 #ff14bd, 0 0 0.5em 0 #ff14bd;
}

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

Далее используем псевдокласс :before

.neon:before {
content: '';
position: absolute;
background: #ff14bd;
box-sizing: border-box;
width: 100%;
height: 100%;
transform: perspective(1em) rotateX(40deg) scale(1, 0.3);
filter: blur(1em);bottom: -2em;opacity: 0.7;
}

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

При клике на кнопку свечение должно усиливаться, поэтому прозрачность будет убрана:

.neon:hover:before {
opacity: 1;
}

А сам неон при большой концентрации энергии загорится белым и будет освещать всё вокруг своим изначальным светом:

.neon:hover {
background: #ff14bd;
color: #fff;
box-shadow: 0 0 2em 0.5em #ff14bd;
}

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

body {
background: #31202b;
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
height:100vh;
font-size: 14px;
}

Вот и всё, красивая кнопка готова. Можно экспериментировать также со свечением, добавить свойство text-shadow и увеличить отражение свечения и придать больший реализм.

В Студии Али Велиева вы можете заказать красивые дизайнерские решения. Будьте уверены, что мы реализуем всё профессионально без дополнительной графики, которая будет создавать нагрузку на браузер клиента.

Полезная информация