Css свечение вокруг кнопки

Разметка для кнопок

В начале создадим разметку для кнопок. Делаем разметку по БЭМ. Так как кнопок три — обернем их в общий контейнер для выравнивания. Сами кнопки имеют общий класс (neon-btn) и классы-модификатор (прим: neon-btn—blue). Общий класс задает размеры, начертание и шрифт кнопки. Классы модификатор отвечает за цвет кнопки. На основе общего класса мы можем создать кнопки с тремя цветами: голубой, фиолетовый и зеленый.

  
Hover me Hover me Hover me 
  

Далее перейдем к стилизации кнопок.

Стилизация неоновым эффектом

Неоновый эффект будет работать только в темной теме сайта. Поэтому задайте общий фон для кнопок. Я сделал это в body. В контейнере задаем стили, чтобы выровнять кнопки по центру и в ряд.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); * < margin: 0; padding: 0; box-sizing: border-box; >*, *::after, *::before < box-sizing: inherit; >body < font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.2; width: 100%; min-height: 100vh; background-color: #151a1e; >.container < display: flex; align-items: center; height: 100vh; justify-content: center; >.neon-btn < border: 1px solid; background-color: transparent; text-transform: uppercase; font-size: 16px; padding: 15px 30px; transition: 0.2s; margin-right: 100px; >.neon-btn--blue < color: #4cc9f0; >.neon-btn--blue:hover < background-color: #4cc9f0; color: #fff; border: 1px solid #4cc9f0; box-shadow: 10px 10px 100px 6px #4cc9f0; >.neon-btn--purple < color: #f038ff; >.neon-btn--purple:hover < background-color: #f038ff; color: #fff; border: 1px solid #f038ff; box-shadow: 10px 10px 100px 6px #f038ff; >.neon-btn--green < color: #b9e769; >.neon-btn--green:hover

Вы можете подбирать свои цвета и тени. Вот ссылка на сервис, где можно удобно сгенерировать тени.

Источник

Анимированный блик на чистом CSS

Приветствую, друзья, сегодня покажу как сделать анимированный блик на кнопке. Использовать для этого мы будем только чистый CSS. Без использования плагинов и библиотек. Наш анимированный блик будет похож на тот, что используют в тильде.

Эффект анимированного блика часто используется для привлечения внимания пользователя. Как только пользователь зайдет на сайт, он сразу увидит кнопку с анимированным бликом. Так же из-за приятной анимации повышается конверсия.

Как всегда, вы можете посмотреть пример блика на кнопке и готовый код для него на codepen .

Анимированный блик на кнопке — HTML часть

Саму кнопку вы можете стилизовать как хотите, тут только мой пример. Важное, что вам нужно сделать — добавить для самой кнопки свойство overflow-x: hidden и position: relative . Это нужно, что бы скрыть блик, когда он не на кнопке и правильно позиционировать его относительно её.

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

.button < padding: 20px 80px; background: #3E64FF; color: #ffffff; text-decoration: none; font-size: 24px; font-weight: 600; border-radius: 10px; position: relative; // Это важно добавить overflow-x: hidden; / Это важно добавить >.button .flare < position: absolute; top: 0; height: 100%; width: 45px; transform: skewX(-45deg); // Наклон animation: flareAnimation; left: -150%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4)); animation: flareAnimation 3s infinite linear; // Время и тип анимации можно менять >@keyframes flareAnimation < 0% < left: -150%; >100% < left: 150%; >>

Результат

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их на Youtube, или пишите мне в Telegram, с радостью вам помогу и отвечу на вопросы.

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник

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

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

HTML для кнопки

.btn < position: relative; display: inline-block; width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 30px; z-index: 1; >.btn:hover < animation: animate 8s linear infinite; >@keyframes animate < 0% < background-position: 0%; >100% < background-position: 400%; >> .btn:before < content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: .5s; >.btn:hover:before

Пример того, как будет выглядеть анимированная кнопка

Видео урока, как написать код для данной светящейся кнопки. Я бы пекомендовал, не копирвоать код, а написать его по этому видео. Это зайет на 2 минуты больше времени, но будет понятна логика, как работает анимация «свечения».

Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…

Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео…

Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока…

Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….

Здравствуйте, кнопка просто супер . Все отлично, но есть маленький нюанс: в браузере Safari при выделении кнопки появляется прямоугольник. На сколько я понял из-за фильтра filter: blur
К Гугл Хроме все отлично отображается. Не подскажите, как можно поправить данный нюанс , чтобы и в Сафари отлично отображался ?

Кстати Сафари схож с браузером Мозила

Проблему видел, как вылечить на 100% не знаю, но на вскидку пару вариантов попробовал, если уменьшить blur и увеличить размер псевдо-элемента, то рамка пропадает, но и фон выглядит меньше, не таким светящимся. А иначе в Сафари выглядит как-будто фон ограничивается и обрезается.

Источник

Как создать мигающую/светящуюся кнопку с помощью анимации в CSS3

В этой статье мы покажем, как создать мигающую/светящуюся кнопку, используя только CSS. Здесь вам не нужно использовать JavaScript. Просто выполните следующие шаги и попробуйте примеры!

1. Создайте ссылку и кнопку.

Прежде всего создадим ссылку и кнопку в таком виде:

a href="#" >button">Click here!a> button type="submit" >button">Click here!button>

2. Добавьте оформление к кнопке.

Дальше необходимо указать внешний вид кнопки с помощью CSS свойств:

.button< background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; >

3. Добавьте анимацию к кнопке:

Нам нужны ключевые кадры, чтобы добавить анимацию. Анимация содержит три ключевых кадра. Каждый из них определяет новые значения для свойств background color и the box-shadow.

@keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 10px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > >

Ключевые кадры в оформлении анимаций:

1. 0% — начальная точка, которая указывает зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 3 px.
2. 50% — средняя точка, которая указывает светло-зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 10 px.
3. 100% — конечная точка, которая указывается как 0%.

Давайте посмотрим результат!

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; > @keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 20px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > > .button < animation: glowing 1300ms infinite; > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> body> html>

Пример

html> html> head> title>Заголовок документа title> style> body < margin: 0; > .wrapper < display: flex; height: 20vh; flex-direction: row; justify-content: center; align-items: center; > .button < border: 1px transparent; -webkit-border-radius: 40px; border-radius: 40px; color: #eeeeee; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 8px 30px; text-align: center; text-decoration: none; margin-left: 20px; -webkit-animation: glowing 1300ms infinite; -moz-animation: glowing 1300ms infinite; -o-animation: glowing 1300ms infinite; animation: glowing 1300ms infinite; > @-webkit-keyframes glowing < 0% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > > @keyframes glowing < 0% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > > .svg-btn < display: block; width: 230px; height: 230px; margin-left: 10px; > svg < fill: blue; -webkit-animation: glowing-polygon 1300ms infinite; -moz-animation: glowing-polygon 1300ms infinite; -o-animation: glowing-polygon 1300ms infinite; animation: glowing-polygon 1300ms infinite; > @-webkit-keyframes glowing-polygon < 0% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > > @keyframes glowingPolygon < 0% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> div class="wrapper"> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> a class="svg-btn"> svg height="210" width="200"> polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/> svg> a> div> body> html>

Источник

15+ CSS Glowing Button With Animated Text

CSS Glowing Buttons with Animated Text is a great way to add some interactivity to your web page or blog. By using a little CSS and JavaScript, you can create buttons that glow when the user hovers over them, and that animate the button’s text when clicked.

To create a CSS Glowing Button With Animated Text, you’ll need the following code:

See the Pen Glowing by Chance Squires (@chancesq) on CodePen.

Title:- Glowing
Author:- Chance Squires
Made With:- HTML CSS

Title:- Glowing Button
Author:- Geek Powered
Made With:- HTML CSS

Title:- Glowing Button
Author:- Sayz Lim
Made With:- HTML CSS

Title:- Rainbow Glowing Button
Author:- Kevin Yu
Made With:- HTML CSS

Title:- Glowing Button
Author:- TahaHarnoune
Made With:- HTML CSS

Title:- Glowing Button Animation
Author:- Fiction Belt
Made With:- HTML CSS

Similar Posts

20+ Search Bar design using HTML,CSS AND JAVASCRIPT -GS CODE

Gscode will discuss excellent search bar design and where to get great search bar design inspiration from Just a simple responsive search box Author Emily Huang Made With HTML,CSS Demo Check Out Demo Links Download Flat CSS search box concept with loading animation Author Ines Montani Made With html(pug),css(sass),js Demo Check Out Demo Links Download Search Form With Animated Search…

50+ Best CSS Gradients For Your Inspiration

In this article, we’ll showcase 50+ of the best CSS gradient examples to inspire your next project Title:- Gradient Ghost ButtonsAuthor:- AlexMade With:- HTML CSS JS Title:- Candy Color Button AnimationAuthor:- YuhomyanMade With:- HTML CSS JS Title:- React Color GradientsAuthor:- Marco BiedermannMade With:- HTML CSS JS Title:- Animated Back GlowAuthor:- George HastingsMade With:- HTML CSS…

Get Inspired with 30+ CSS Motion Path Examples

Here is a list of 30+ CSS motion path examples that demonstrate how to use the CSS motion-path property to animate an element along a custom path: See the Pen Stay cool w/ responsive motion-path 😎 by Jhey (@jh3y) on CodePen. Title:- Stay cool w/ responsive motion-path ??Author:- JheyMade with:- CSS HTML JS See the…

40+ Stunning CSS Weather Widget Example

See the Pen Animated CSS Weather Icons — A Remix by Jase (@jasesmith) on CodePen. Title:- Animated CSS Weather Icons — A RemixAuthor:- JaseMade With:- HTML CSS See the Pen Weather Popup/Widget by Bradley Treweek (@cmd430) on CodePen. Title:- Weather Popup/WidgetAuthor:- Bradley TreweekMade With:- HTML CSS See the Pen Animated Weather Cards by Steve Gardner…

30+ Creative CSS HTML Slideshows From CodePen

Check out The Best 30+ creative CSS HTML slideshows from CodePen, showcasing the power of CSS and HTML in creating engaging slideshows. Title:-Responsive Slideshow / Image Carousel Author:-Craig Butterworth Made with:- HTML CSS JS Title:-3D Carousel/Slider (CSS 3D & Vanilla JS) Author:-Jonathan Ching Made with:- HTML CSS JS Title:-Movie Credits Letter Effect Slideshow Author:-Connor Made…

10+ Animated rainbow text Effects

Check Out Best Animated rainbow text Effects Made With HTML CSS JAVASCRIPT See the Pen hairy rainbow text – pixi.js by Rachel Smith (@rachsmith) on CodePen. Title:- Rainbow text hover Author:- Sarah FossheimMade With:- HTML CSS JAVASCRIPT See the Pen Rainbow text hover animation by Sarah Fossheim (@fossheim) on CodePen. Title:- Rainbow text hover animationAuthor:-…

Источник