Css свечение кнопки при наведении

Анимированный блик на чистом 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. Люблю помогать людям изучать что-то новое)

Источник

Подсвечивающиеся кнопки при наведении на них курсора мышки

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

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

Чтобы получить на своем сайте подобные светящиеся кнопки (button), Вам необходимо скопировать следующий стиль оформления кнопок на Вашу страничку:

< style type = "text/css" >
. button padding : 3px 15px ;
margin : 15px ;
cursor : pointer ;
border : 0px ;
background — color : #339900;
font — size : 18px ;
color : #000000;
box — shadow : 0 0 5px #FF00FF;
— moz — box — shadow : 0 0 5px #FF00FF;
— ms — box — shadow : 0 0 5px #FF00FF;
— o — box — shadow : 0 0 5px #FF00FF;
— webkit — box — shadow : 0 0 5px #FF00FF;
>
. button : hover box — shadow : 0 0 12px #6633FF;
— moz — box — shadow : 0 0 12px #6633FF;
— o — box — shadow : 0 0 12px #6633FF;
— ms — box — shadow : 0 0 12px #6633FF;
— webkit — box — shadow : 0 0 12px #6633FF;
>

Кнопки, к которым следует применить эффект свечения, следует оформлять следующим образом:

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

Источник

60 классных кнопок на CSS с анимацией

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

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

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

#1 Кнопка с эффектом свечения

CSS Button Hover Glow Effect by Kocsten on CodePen.

#2 Скругленная кнопка

Pure Css Button Hover effect by alticreation on CodePen.

Написано на: HTML, CSS (SCSS);

#3 Игристая кнопка

Bubbly Button by Nour Saud on CodePen.

#4 Кнопки с иконками

Icon buttons by Andrea Maselli on CodePen.

#5 Пузырящаяся кнопка

Blobs button by Hilary on CodePen.

Написано на: HTML, CSS (SCSS);

#6 Тонкие кнопки

Simple CSS Button Hover Effects by Natalia Reshetnikova on CodePen.

Автор: Natalia Reshetnikova;

#7 Кнопки с указателем загрузки

Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#8 Скругленная пульсирующая кнопка

CSS Button With Hover Effect by Raj Kamal Chenumalla on CodePen.

Написано на: HTML, CSS (SCSS);

#9 «Шипучая» кнопка

CSS Fizzy Button by Jürgen Leister on CodePen.

Написано на: HTML (Haml), CSS (SCSS);

#10 Кнопка N° 045

Button N° 045 by Vitor Siqueira on CodePen.

#11 Кнопка с пузырьками

Flush button by AbhishekBaiju on CodePen.

#12 Кнопочное представление

Button Concept by Shyam on CodePen.

Написано на: HTML, CSS (SCSS), JS (CoffeeScript);

#13 Разрезанная кнопка

CSS Sliced Button by Sarah on CodePen.

#14 Модные кнопки с иконками

Pure CSS Buttons by Ishaan Saxena on CodePen.

Написано на: HTML (Pug), CSS (SCSS);

#15 Изменяющаяся кнопка

Css Button Hover #5 by thelaazyguy on CodePen.

#16 Простая кнопка

CSS button by Tiberiu Raducea on CodePen.

Написано на: HTML, CSS (SCSS);

#17 Кнопка-перевертыш

Auto Width Css Button Flip by Alex Moore on CodePen.

Написано на: HTML, CSS (SCSS);

#18 Кнопка с цветной шторкой вправо

Css Button Hover #2 — Background by thelaazyguy on CodePen.

#19 Замысловатые кнопки

CSS Button Effect by Alexandre do Vale on CodePen.

#20 Кнопки с откидывающейся крышкой

FlipCover CSS Mixin by Velina V Veleva on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#21 Коллекция кнопок с эффектом при наведении

Collection of Button Hover Effects by David Conner on CodePen.

Написано на: HTML, CSS (SCSS);

#22 Кнопка с CSS эффектами: Анимированная рамка & Свечение

CSS Button Effect: Animated Border & Glow. by Anthony on CodePen.

#23 Кнопка с CSS эффектом при наведении

CSS BUTTON HOVER by Imran Pardes on CodePen.

#24 Все еще на виду

Untitled by Alex Bodin on CodePen.

#25 CSS Кнопка с кольцевым индикатором

Pure CSS Button with Ring Indicator by Cole McCombs on CodePen.

#26 Кнопки с разными эффектами при наведении

Button Hover Effects by Kyle Brumm on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#27 Кнопка с пузырьковым эффектом

Button bubble effect by Adrien Grsmto on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#28 Анимированная кнопка отправки данных

animation submit button by Valentin Galmand on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#29 Кто не любит забавные кнопки?

CSS BUTTONS!! by Derek Morash on CodePen.

Написано на: HTML, CSS (SCSS);

#30 Перевертыш

Flipside by Hakim El Hattab on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#31 Резиновые переключатели

Squishy Toggle Buttons by Justin Windle on CodePen.

Написано на: HTML, CSS (Sass);

#32 Эффект при наведении на кнопку с box-shadow

Button hover effects with box-shadow by Giana on CodePen.

Написано на: HTML, CSS (SCSS);

#33 Кнопка «Submit» (Anime.js)

Submit Button (Anime.js) by Andrew Millen on CodePen.

Написано на: HTML, CSS (SCSS), JS (jQuery & anime.js);

#34 Анимация CSS кнопки

CSS Button Animation by Sasha on CodePen.

Написано на: HTML (Pug), CSS (SCSS), JS;

#35 CSS кнопка в виде пуговицы на пледе

CSS Button on Plaid by Marcus Connor on CodePen.

#36 CSS кнопка тонет в пузырьках

CSS button with bubbles by Giana on CodePen.

Написано на: HTML, CSS (SCSS);

#37 jQuery + 3D кнопка

jQuery +3D css button by Carlos G Notario on CodePen.

Написано на: HTML, CSS, JS (jQuery);

#38 Кнопка-переключатель на чистом CSS

Pure CSS button switch by Kitty Giraudel on CodePen.

Написано на: HTML, CSS (SCSS);

#39 Коллекция креативных кнопок с эффектом при наведении

Creative Button Hover Collection by Yasin Softaoğlu on CodePen.

#40 Анимации кнопок

CSS Button Animations by Alex Loomer on CodePen.

#41 Кнопка с эффектом сияния и свечения

CSS Button with Hover Effect by Kniw Studio on CodePen.

#42 Изящная кнопка

Button Practice by Ivan Villa on CodePen.

Написано на: HTML, CSS (SCSS);

#43 Шесть анимаций наведения на кнопки

Six Pure CSS Button Hover Animations by Christian on CodePen.

#44 3D Кнопка

3D CSS BUTTON by SULEMANS CODES on CodePen.

#45 Ретро кнопка в стиле 70-х

70s CSS Button by Jordan Halvorsen on CodePen.

#46 100 дневная кнопка N° 045

100 days css Button N° 045 by Vitor Siqueira on CodePen.

#47 Кнопка с еще одним эффектом наведения

Button Hover by Katherine Kato on CodePen.

Написано на: HTML, CSS (SCSS);

#48 Анимация кнопки загрузки

Download Button Animation by Aaron Iker on CodePen.

Написано на: HTML, CSS (SCSS), JS (gsap);

#49 Жидкая кнопка

Liquid button by Waaark on CodePen.

Написано на: HTML, CSS, JS (jQuery);

#50 Крутые кнопки

Awesome Buttons by Astitva2009 on CodePen.

#51 Кнопка с крутым эффектом наведения

Awesome Button Hover Effect by Devang Bajpai on CodePen.

#52 Кнопка со слайдерной анимацией наведения

Button Animated | Button hover with slide animation Pure css by Ajeet Kumar on CodePen.

#53 Кнопка с анимацией Запрос/Успех/Ошибка

CSS Button Pending / Success / Fail Animation by Felix M. on CodePen.

Написано на: HTML, CSS (SCSS), JS (Babel);

#54 Кнопки с переходами

CSS Button transitions by Robin Treur on CodePen.

Написано на: HTML, CSS (SCSS);

#55 Неоновые кнопки

Untitled by Np|Nihad Pasa on CodePen.

#56 Кнопки с разной анимацией наведения

Pure CSS button hover animation by afa on CodePen.

Написано на: HTML, CSS (SCSS);

#57 Кнопка с эффектом наведения #03

Button Hover Effect #03 by Eslam on CodePen.

#58 Растягивающаяся кнопка

Css Button Hover #1 — Stretchable Button by thelaazyguy on CodePen.

#59 Эффектная кнопка

Supah Awesome CSS Button by Kyle Lavery on CodePen.

Написано на: HTML, CSS (SCSS);

#60 Кнопки с разным заполнением

Pure CSS Button fill effects by Pieter Biesemans on CodePen.

Написано на: HTML, CSS (SCSS);

Заключение

А какие кнопки понравились вам?

P.S. Все представленные здесь кнопки опубликованы на сайте codepen.io и разрабатывались другими авторами, а не нами.

Источник