60 классных кнопок на CSS с анимацией
Кнопки являются важной частью веб-дизайна, поскольку они не только улучшают пользовательский интерфейс, но и влияют на внешний вид и эстетику веб-сайта. В этой статье вы найдете коллекцию лучших кнопок на CSS.
Будь то большие и широкие кнопки на главной странице или маленькие и незаметные в подвале, кнопки являются очень важным элементом дизайна для направления действий пользователей вашего сайте. Для корпоративного веб-сайта часто используется более сдержанный дизайн, в то время как в индустрии развлечений, как правило, используют более яркие и «кричащие» кнопки. Ниже представлены самые разные CSS кнопки, среди которых можно выбрать то, что подойдет для достижения вашей цели.
Также, многие веб-дизайнеры придают большое значение анимации при наведении курсора или фокусировке, поэтому у всех кнопок есть приятная анимация. Итак, приступим!
Все представленные здесь коды кнопок распространяются по лицензии MIT.
#1 Кнопка с эффектом свечения
CSS Button Hover Glow Effect by Kocsten on CodePen.
Написано на: HTML, CSS;
#2 Скругленная кнопка
Pure Css Button Hover effect by alticreation on CodePen.
Написано на: HTML, CSS (SCSS);
#3 Игристая кнопка
Bubbly Button by Nour Saud on CodePen.
Автор: Nour Saud;
Написано на: HTML, CSS;
#4 Кнопки с иконками
Icon buttons by Andrea Maselli on CodePen.
Автор: Andrea Maselli;
Написано на: HTML, CSS;
#5 Пузырящаяся кнопка
Blobs button by Hilary on CodePen.
Написано на: HTML, CSS (SCSS);
#6 Тонкие кнопки
Simple CSS Button Hover Effects by Natalia Reshetnikova on CodePen.
Автор: Natalia Reshetnikova;
Написано на: HTML, CSS;
#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.
Автор: Raj Kamal;
Написано на: HTML, CSS (SCSS);
#9 «Шипучая» кнопка
CSS Fizzy Button by Jürgen Leister on CodePen.
Автор: Jürgen Leister;
Написано на: HTML (Haml), CSS (SCSS);
#10 Кнопка N° 045
Button N° 045 by Vitor Siqueira on CodePen.
Автор: Vitor Siqueira;
Написано на: HTML, CSS;
#11 Кнопка с пузырьками
Flush button by AbhishekBaiju on CodePen.
Написано на: HTML, CSS;
#12 Кнопочное представление
Button Concept by Shyam on CodePen.
Написано на: HTML, CSS (SCSS), JS (CoffeeScript);
#13 Разрезанная кнопка
CSS Sliced Button by Sarah on CodePen.
Написано на: HTML, CSS;
#14 Модные кнопки с иконками
Pure CSS Buttons by Ishaan Saxena on CodePen.
Автор: Ishaan Saxena;
Написано на: HTML (Pug), CSS (SCSS);
#15 Изменяющаяся кнопка
Css Button Hover #5 by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#16 Простая кнопка
CSS button by Tiberiu Raducea on CodePen.
Автор: Tiberiu Raducea;
Написано на: HTML, CSS (SCSS);
#17 Кнопка-перевертыш
Auto Width Css Button Flip by Alex Moore on CodePen.
Автор: Alex Moore;
Написано на: HTML, CSS (SCSS);
#18 Кнопка с цветной шторкой вправо
Css Button Hover #2 — Background by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#19 Замысловатые кнопки
CSS Button Effect by Alexandre do Vale on CodePen.
Автор: Alexandre do Vale;
Написано на: HTML, CSS, JS;
#20 Кнопки с откидывающейся крышкой
FlipCover CSS Mixin by Velina V Veleva on CodePen.
Автор: Velina V Veleva;
Написано на: HTML, CSS (SCSS), JS;
#21 Коллекция кнопок с эффектом при наведении
Collection of Button Hover Effects by David Conner on CodePen.
Автор: David Conner;
Написано на: HTML, CSS (SCSS);
#22 Кнопка с CSS эффектами: Анимированная рамка & Свечение
CSS Button Effect: Animated Border & Glow. by Anthony on CodePen.
Автор: Blade Multimedia;
Написано на: HTML, CSS;
#23 Кнопка с CSS эффектом при наведении
CSS BUTTON HOVER by Imran Pardes on CodePen.
Автор: Imran Pardes;
Написано на: HTML, CSS;
#24 Все еще на виду
Untitled by Alex Bodin on CodePen.
Автор: Alex Bodin;
Написано на: HTML, CSS;
#25 CSS Кнопка с кольцевым индикатором
Pure CSS Button with Ring Indicator by Cole McCombs on CodePen.
Автор: Cole McCombs;
Написано на: HTML, CSS;
#26 Кнопки с разными эффектами при наведении
Button Hover Effects by Kyle Brumm on CodePen.
Автор: Kyle Brumm;
Написано на: HTML, CSS (SCSS), JS;
#27 Кнопка с пузырьковым эффектом
Button bubble effect by Adrien Grsmto on CodePen.
Автор: Adrien Grsmto;
Написано на: HTML, CSS (SCSS), JS;
#28 Анимированная кнопка отправки данных
animation submit button by Valentin Galmand on CodePen.
Автор: Valentin Galmand;
Написано на: HTML, CSS (SCSS), JS;
#29 Кто не любит забавные кнопки?
CSS BUTTONS!! by Derek Morash on CodePen.
Автор: Derek Morash;
Написано на: HTML, CSS (SCSS);
#30 Перевертыш
Flipside by Hakim El Hattab on CodePen.
Автор: Hakim El Hattab;
Написано на: HTML, CSS (SCSS), JS;
#31 Резиновые переключатели
Squishy Toggle Buttons by Justin Windle on CodePen.
Автор: Justin Windle;
Написано на: 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.
Автор: Andrew Millen;
Написано на: 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.
Автор: Marcus Connor;
Написано на: HTML, CSS;
#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.
Автор: Carlos G Notario;
Написано на: HTML, CSS, JS (jQuery);
#38 Кнопка-переключатель на чистом CSS
Pure CSS button switch by Kitty Giraudel on CodePen.
Автор: Kitty Giraudel;
Написано на: HTML, CSS (SCSS);
#39 Коллекция креативных кнопок с эффектом при наведении
Creative Button Hover Collection by Yasin Softaoğlu on CodePen.
Автор: Yasin Softaoğlu;
Написано на: HTML, CSS;
#40 Анимации кнопок
CSS Button Animations by Alex Loomer on CodePen.
Автор: Alex Loomer;
Написано на: HTML, CSS;
#41 Кнопка с эффектом сияния и свечения
CSS Button with Hover Effect by Kniw Studio on CodePen.
Автор: Kniw Studio;
Написано на: HTML, CSS;
#42 Изящная кнопка
Button Practice by Ivan Villa on CodePen.
Автор: Ivan Villa;
Написано на: HTML, CSS (SCSS);
#43 Шесть анимаций наведения на кнопки
Six Pure CSS Button Hover Animations by Christian on CodePen.
Написано на: HTML, CSS;
#44 3D Кнопка
3D CSS BUTTON by SULEMANS CODES on CodePen.
Автор: SULEMANS CODES;
Написано на: HTML, CSS, JS;
#45 Ретро кнопка в стиле 70-х
70s CSS Button by Jordan Halvorsen on CodePen.
Автор: Jordan Halvorsen;
Написано на: HTML, CSS;
#46 100 дневная кнопка N° 045
100 days css Button N° 045 by Vitor Siqueira on CodePen.
Автор: Vitor Siqueira;
Написано на: HTML, CSS;
#47 Кнопка с еще одним эффектом наведения
Button Hover by Katherine Kato on CodePen.
Автор: Katherine Kato;
Написано на: HTML, CSS (SCSS);
#48 Анимация кнопки загрузки
Download Button Animation by Aaron Iker on CodePen.
Автор: Aaron Iker;
Написано на: HTML, CSS (SCSS), JS (gsap);
#49 Жидкая кнопка
Liquid button by Waaark on CodePen.
Написано на: HTML, CSS, JS (jQuery);
#50 Крутые кнопки
Awesome Buttons by Astitva2009 on CodePen.
Написано на: HTML, CSS;
#51 Кнопка с крутым эффектом наведения
Awesome Button Hover Effect by Devang Bajpai on CodePen.
Автор: Devang Bajpai;
Написано на: HTML, CSS;
#52 Кнопка со слайдерной анимацией наведения
Button Animated | Button hover with slide animation Pure css by Ajeet Kumar on CodePen.
Автор: Ajeet Kumar;
Написано на: HTML, CSS;
#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.
Автор: Robin Treur;
Написано на: HTML, CSS (SCSS);
#55 Неоновые кнопки
Untitled by Np|Nihad Pasa on CodePen.
Автор: Np|Nihad Pasa;
Написано на: HTML, CSS;
#56 Кнопки с разной анимацией наведения
Pure CSS button hover animation by afa on CodePen.
Написано на: HTML, CSS (SCSS);
#57 Кнопка с эффектом наведения #03
Button Hover Effect #03 by Eslam on CodePen.
Написано на: HTML, CSS;
#58 Растягивающаяся кнопка
Css Button Hover #1 — Stretchable Button by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#59 Эффектная кнопка
Supah Awesome CSS Button by Kyle Lavery on CodePen.
Автор: Kyle Lavery;
Написано на: HTML, CSS (SCSS);
#60 Кнопки с разным заполнением
Pure CSS Button fill effects by Pieter Biesemans on CodePen.
Автор: Pieter Biesemans;
Написано на: HTML, CSS (SCSS);
Заключение
А какие кнопки понравились вам?
P.S. Все представленные здесь кнопки опубликованы на сайте codepen.io и разрабатывались другими авторами, а не нами.
4 простых эффекта CSS для кнопок
В данном уроке рассматриваются четыре очень простых кнопки CSS с эффектами анимации при наведении курсора мыши на них.
Общие установки
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
HTML
Для кнопок будет использоваться очень простой HTML код:
CSS
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
.buttonText < font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; >a
Увеличивающаяся кнопка
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер — она увеличивается, показывая дополнительное сообщение.
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
#button1
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
#button1:hover
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
#button2
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация практически не отличается от предыдущего примера.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
#button2:hover
Сдвиг фонового изображения
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0». При наведении курсора положение сдвигается по вертикали.
#button3
Эффекты CSS3
В данном примере нет ничего особенного — скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
#button4
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover < margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); >
Красивые кнопки для сайта
Вашему вниманию предлагается новая коллекция идей, как можно красиво оформить кнопки для сайта. Необычные эффекты созданы с помощью фоновых заливок, тени блока, трансформаций и псевдоэлементов.
Большинство примеров реализованы на основе одного элемента Button . Вы можете использовать свою цветовую гамму, шрифт и размеры для кнопок, чтобы они гармонично вписались в общий дизайн вашего сайта.
Пример 1.
Анимация при наведении достигается за счёт изменения позиции градиентной заливки.
body < background: #d6eaf8; >.gradient-button < text-decoration: none; display: inline-block; color: white; padding: 20px 30px; margin: 10px 20px; border-radius: 10px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%); background-size: 200% auto; box-shadow: 0 0 20px rgba(0, 0, 0, .1); transition: .5s; >.gradient-button:hover
Пример 2.
Для псевдоэлементов изначально задана нулевая высота и ширина, которая сменяется на 100% при наведении. Блоки, генерируемые с помощью псевдоэлементов, прозрачные, для них заданы левая/верхняя и правая/нижняя границы, которые проявляются при наведении, создавая эффект прорисовки.
body < background: linear-gradient(to top, #55EFCB 0%, #5BCAFF 100%); height: 100%; >.border-button < text-decoration: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: white; border: 1px solid rgba(255, 255, 255, .4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; >.border-button:before, .border-button:after < content: ""; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; >.border-button:before < bottom: 0; left: 0; border-left: 1px solid white; border-top: 1px solid white; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; >.border-button:after < top: 0; right: 0; border-right: 1px solid white; border-bottom: 1px solid white; transition: 0s ease opacity .4s, .2s ease width, .2s ease height .2s; >.border-button:hover:before, .border-button:hover:after < height: 100%; width: 100%; opacity: 1; >.border-button:hover:before < transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s; >.border-button:hover:after < transition: 0s ease opacity .4s, .2s ease height .4s, .2s ease width .6s; >.border-button:hover
Пример 3.
Кнопка при наведении меняет цвет фона и текста, тень блока и смещается вверх с помощью трансформации.
body < background: url(https://html5book.ru/wp-content/uploads/2015/07/background39.png); >.floating-button < text-decoration: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0, 0, 0, .1); transition: .3s; >.floating-button:hover
Пример 4.
При наведении кнопка меняет положение градиента, а тень блока исчезает.
body < background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png); >.pressed-button < text-decoration: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0, 40, 120, .35); transition: .5s; >.pressed-button:hover
Пример 5.
При наведении градиентный блок, генерируемый с помощью псевдоэлемента, меняет высоту с нулевой на 100%.
body < background: #1D1B26; >.sliding-button < text-decoration: none; color: white; display: inline-block; position: relative; padding: 15px 30px; border: 1px solid; border-image: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); border-image-slice: 1; margin: 10px 20px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; transition: .8s cubic-bezier(.165, .84, .44, 1); >.sliding-button:before < content: ""; position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: -1; color: white; background: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); transition: .8s cubic-bezier(.165, .84, .44, 1); >.sliding-button:hover < background: rgba(255, 255, 255, 0); >.sliding-button:hover:before
Пример 6.
При наведении кнопке добавляется анимация градиентной заливки.
body < background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png); >.animated-button < text-decoration: none; display: inline-block; margin: 10px 20px; padding: 15px 30px; overflow: hidden; border: 2px solid; border-bottom-width: 4px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: rgba(30, 255, 188, 1); background: rgba(255, 255, 255, 1); transition: color .3s, background .5s; >.animated-button:hover < animation: stripes .75s infinite linear; background: linear-gradient(45deg, rgba(30, 255, 188, 1) 25%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(30, 255, 188, 1) 50%, rgba(30, 255, 188, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1)); background-size: 10px 10px; color: #FF50E5; >@keyframes stripes < 0% < background-position: 0 0; >100% < background-position: 50px 0; >>Пример 7.
Фоновая заливка кнопки создана с помощью внутренней тени блока, которая меняет свой размер при наведении плюс добавляется внешняя тень блока.
body < background: #A4DADA; >.glow-button < text-decoration: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-family: 'Montserrat', sans-serif; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; >.glow-button:hover
Пример 8.
Эффект «слайда» при наведении реализуется с помощью перемещения блоков-псевдоэлементов, один из которых расположен за левой границей кнопки, второй — за правой границей.
body < background: #ebcacb; >.closing-button < text-decoration: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; >.closing-button span < font-family: 'Montserrat', sans-serif; position: relative; z-index: 5; >.closing-button:before, .closing-button:after < content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; >.closing-button:before < transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55, .055, .675, .19); >.closing-button:after < background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16, .73, .58, .62) .3s; >.closing-button:hover:before, .closing-button:hover:after
Пример 9.
Вторая рамка сгенерирована с помощью псевдоэлемента, который дублирует кнопку и при наведении меняет цвет рамки, а также высоту и ширину.
body < background: #1b2631; >.double-border-button < text-decoration: none; display: inline-block; margin: 10px 20px; padding: 10px 30px; position: relative; border: 2px solid #f1c40f; color: #f1c40f; font-family: 'Montserrat', sans-serif; transition: .4s; >.double-border-button:after < content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; border: 2px solid rgba(0, 0, 0, 0); transition: .4s; >.double-border-button:hover:after
Пример 10.
Псевдоэлемент, залитый градиентом, повёрнут на 45 градусов и смещен за левую границу кнопки. При наведении он перемещается за правую границу, создавая эффект блика.
body < background: #ffbfbe; >.shine-button < text-decoration: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; font-family: 'Montserrat', sans-serif; color: #fe6637; transition: .2s ease-in-out; >.shine-button:before < content: ""; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); >.shine-button:hover < background: #fe6637; color: #fff; >.shine-button:hover:before
Как создать мигающую/светящуюся кнопку с помощью анимации в 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; > >Ключевые кадры в оформлении анимаций:
- 0% — начальная точка, которая указывает зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 3 px.
- 50% — средняя точка, которая указывает светло-зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 10 px.
- 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>