- 60 классных кнопок на CSS с анимацией
- #1 Кнопка с эффектом свечения
- #2 Скругленная кнопка
- #3 Игристая кнопка
- #4 Кнопки с иконками
- #5 Пузырящаяся кнопка
- #6 Тонкие кнопки
- #7 Кнопки с указателем загрузки
- #8 Скругленная пульсирующая кнопка
- #9 «Шипучая» кнопка
- #10 Кнопка N° 045
- #11 Кнопка с пузырьками
- #12 Кнопочное представление
- #13 Разрезанная кнопка
- #14 Модные кнопки с иконками
- #15 Изменяющаяся кнопка
- #16 Простая кнопка
- #17 Кнопка-перевертыш
- #18 Кнопка с цветной шторкой вправо
- #19 Замысловатые кнопки
- #20 Кнопки с откидывающейся крышкой
- #21 Коллекция кнопок с эффектом при наведении
- #22 Кнопка с CSS эффектами: Анимированная рамка & Свечение
- #23 Кнопка с CSS эффектом при наведении
- #24 Все еще на виду
- #25 CSS Кнопка с кольцевым индикатором
- #26 Кнопки с разными эффектами при наведении
- #27 Кнопка с пузырьковым эффектом
- #28 Анимированная кнопка отправки данных
- #29 Кто не любит забавные кнопки?
- #30 Перевертыш
- #31 Резиновые переключатели
- #32 Эффект при наведении на кнопку с box-shadow
- #33 Кнопка «Submit» (Anime.js)
- #34 Анимация CSS кнопки
- #35 CSS кнопка в виде пуговицы на пледе
- #36 CSS кнопка тонет в пузырьках
- #37 jQuery + 3D кнопка
- #38 Кнопка-переключатель на чистом CSS
- #39 Коллекция креативных кнопок с эффектом при наведении
- #40 Анимации кнопок
- #41 Кнопка с эффектом сияния и свечения
- #42 Изящная кнопка
- #43 Шесть анимаций наведения на кнопки
- #44 3D Кнопка
- #45 Ретро кнопка в стиле 70-х
- #46 100 дневная кнопка N° 045
- #47 Кнопка с еще одним эффектом наведения
- #48 Анимация кнопки загрузки
- #49 Жидкая кнопка
- #50 Крутые кнопки
- #51 Кнопка с крутым эффектом наведения
- #52 Кнопка со слайдерной анимацией наведения
- #53 Кнопка с анимацией Запрос/Успех/Ошибка
- #54 Кнопки с переходами
- #55 Неоновые кнопки
- #56 Кнопки с разной анимацией наведения
- #57 Кнопка с эффектом наведения #03
- #58 Растягивающаяся кнопка
- #59 Эффектная кнопка
- #60 Кнопки с разным заполнением
- Заключение
- 65 cool CSS Buttons – with Animations!
- #1 Hover Glow Effect
- #2 Rounded Button
- #3 Blubby Button
- #4 Icon buttons
- #5 Blobs button
- #6 Thin Buttons
- #7 Bootstrap Buttons
- #8 Rounded Pulse Button
- #9 CSS Fizzy Button
- #10 Button N° 045
- #11 Flush button
- #12 Button Concept
- #13 Sliced Button
- #14 More fancy Icon buttons
- #15 Button Change
- #16 Simple Button
- #17 Button Flip
- #18 Swipe Right Button
- #19 Fancy Buttons
- #20 FlipCover Buttons
- #21 Collection of Button Hover Effects
- #22 CSS Button Effect: Animated Border & Glow
- #23 CSS Button Hover
- #24 Still in View
- #25 Pure CSS Button with Ring Indicator
- #26 Button Hover Effects
- #27 Button bubble effect
- #28 Animation Submit Button
- #29 Who doesn’t like Fun Buttons?
- #30 Flipside
- #31 Squishy Toggle Buttons
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 и разрабатывались другими авторами, а не нами.
65 cool CSS Buttons – with Animations!
CSS buttons are an important part of web design, as they not only improve the user experience, but also affect the look and aesthetics of the website. In this article you will find a collection of the best CSS buttons.
Whether big and bold on your home page or small and discreet in the footer, buttons are a very important design element for the user flow on your website. For a corporate website, a more discreet design is often used, while creative industries tend to use more eye-catching and “flashy” buttons. So that all industries are equally served, you will find many different button styles here.
I – and many other web developers/designers – also set a high value on animations for Hover or Focus, which is why all of the following buttons bring along nice animations. But now we start directly!
The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.
#1 Hover Glow Effect
Author: Kocsten;
Coded in: HTML, CSS;
#2 Rounded Button
Author: alticreation;
Coded in: HTML, CSS (SCSS);
#3 Blubby Button
Author: Nour Saud;
Coded in: HTML, CSS;
#4 Icon buttons
Author: Andrea Maselli;
Coded in: HTML, CSS;
#5 Blobs button
Author: Hilary;
Coded in: HTML, CSS (SCSS);
#6 Thin Buttons
Author: Natalia Reshetnikova;
Coded in: HTML, CSS;
#7 Bootstrap Buttons
Author: dew31794;
Coded in: HTML, CSS (SCSS), JS;
#8 Rounded Pulse Button
Author: Raj Kamal;
Coded in: HTML, CSS (SCSS);
#9 CSS Fizzy Button
See the Pen CSS Fizzy Button by Jürgen Leister (@webLeister) on CodePen.
Author: Jürgen Leister;
Coded in: HTML (Haml), CSS (SCSS);
#10 Button N° 045
Author: Vitor Siqueira;
Coded in: HTML, CSS;
#11 Flush button
Author: AbhishekBaiju;
Coded in: HTML, CSS;
#12 Button Concept
Author: Shyam;
Coded in: HTML, CSS (SCSS), JS (CoffeeScript);
#13 Sliced Button
Author: Sarah;
Coded in: HTML, CSS;
#14 More fancy Icon buttons
Author: Ishaan Saxena;
Coded in: HTML (Pug), CSS (SCSS);
#15 Button Change
Author: thelaazyguy;
Coded in: HTML, CSS;
#16 Simple Button
See the Pen CSS button by Tiberiu Raducea (@tyberiu88) on CodePen.
Author: Tiberiu Raducea;
Coded in: HTML, CSS (SCSS);
#17 Button Flip
Author: Alex Moore;
Coded in: HTML, CSS (SCSS);
#18 Swipe Right Button
Author: thelaazyguy;
Coded in: HTML, CSS;
#19 Fancy Buttons
See the Pen CSS Button Effect by Alexandre do Vale (@alexandrevale) on CodePen.
Author: Alexandre do Vale;
Coded in: HTML, CSS, JS;
#20 FlipCover Buttons
See the Pen FlipCover CSS Mixin by Velina V Veleva (@vveleva) on CodePen.
Author: Velina V Veleva;
Coded in: HTML, CSS (SCSS), JS;
#21 Collection of Button Hover Effects
Author: David Conner;
Coded in: HTML, CSS (SCSS);
#22 CSS Button Effect: Animated Border & Glow
Author: Blade Multimedia;
Coded in: HTML, CSS;
#23 CSS Button Hover
See the Pen CSS BUTTON HOVER by Imran Pardes (@folaad) on CodePen.
Author: Imran Pardes;
Coded in: HTML, CSS;
#24 Still in View
See the Pen XWrqpxB by Alex Bodin (@Alexb98) on CodePen.
Author: Alex Bodin;
Coded in: HTML, CSS;
#25 Pure CSS Button with Ring Indicator
Author: Cole McCombs;
Coded in: HTML, CSS;
#26 Button Hover Effects
Author: Kyle Brumm;
Coded in: HTML, CSS (SCSS), JS;
#27 Button bubble effect
Author: Adrien Grsmto;
Coded in: HTML, CSS (SCSS), JS;
#28 Animation Submit Button
Author: Valentin Galmand;
Coded in: HTML, CSS (SCSS), JS;
#29 Who doesn’t like Fun Buttons?
Author: Derek Morash;
Coded in: HTML, CSS (SCSS);
#30 Flipside
See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.
Author: Hakim El Hattab;
Coded in: HTML, CSS (SCSS), JS;
#31 Squishy Toggle Buttons
Author: Justin Windle;
Coded in: HTML, CSS (Sass);