Кнопки являются важной частью веб-дизайна, поскольку они не только улучшают пользовательский интерфейс, но и влияют на внешний вид и эстетику веб-сайта. В этой статье вы найдете коллекцию лучших кнопок на CSS.
Будь то большие и широкие кнопки на главной странице или маленькие и незаметные в подвале, кнопки являются очень важным элементом дизайна для направления действий пользователей вашего сайте. Для корпоративного веб-сайта часто используется более сдержанный дизайн, в то время как в индустрии развлечений, как правило, используют более яркие и "кричащие" кнопки. Ниже представлены самые разные CSS кнопки, среди которых можно выбрать то, что подойдет для достижения вашей цели.
Также, многие веб-дизайнеры придают большое значение анимации при наведении курсора или фокусировке, поэтому у всех кнопок есть приятная анимация. Итак, приступим!
#1 Кнопка с эффектом свечения
CSS Button Hover Glow Effect by Kocsten on CodePen.
Автор: Kocsten;
Написано на: HTML, CSS;
#2 Скругленная кнопка
Pure Css Button Hover effect by alticreation on CodePen.
Автор: alticreation;
Написано на: 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.
Автор: Hilary;
Написано на: 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.
Автор: dew31794;
Написано на: 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.
Автор: AbhishekBaiju;
Написано на: HTML, CSS;
#12 Кнопочное представление
Button Concept by Shyam on CodePen.
Автор: Shyam;
Написано на: HTML, CSS (SCSS), JS (CoffeeScript);
#13 Разрезанная кнопка
CSS Sliced Button by Sarah on CodePen.
Автор: Sarah;
Написано на: 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.
Автор: thelaazyguy;
Написано на: 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.
Автор: thelaazyguy;
Написано на: 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.
Автор: Giana;
Написано на: 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.
Автор: Sasha;
Написано на: 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.
Автор: Giana;
Написано на: 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.
Автор: Christian;
Написано на: 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.
Автор: Waaark;
Написано на: HTML, CSS, JS (jQuery);
#50 Крутые кнопки
Awesome Buttons by Astitva2009 on CodePen.
Автор: Astitva2009;
Написано на: 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.
Автор: Felix M.;
Написано на: 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.
Автор: afa;
Написано на: HTML, CSS (SCSS);
#57 Кнопка с эффектом наведения #03
Button Hover Effect #03 by Eslam on CodePen.
Автор: Eslam;
Написано на: HTML, CSS;
#58 Растягивающаяся кнопка
Css Button Hover #1 - Stretchable Button by thelaazyguy on CodePen.
Автор: thelaazyguy;
Написано на: 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);
Заключение
А какие кнопки понравились вам?
