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 и разрабатывались другими авторами, а не нами.
Кнопки CSS эффекты при наведении и нажатии
Здесь не про дизайн. Здесь готовый код различных эффектов с подробными комментариями.
В дальнейшем эти эффекты можно будет применить к любой дизайнерской идее и создать оригинальную кнопку, которой нет больше ни у кого в интернете.
Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow , поэкспериментировать со свойствами gradient и background
Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.
Варианты кнопок будут добавляться по мере создания.
Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.
Кнопка Многоцветная рамка Код
Кнопка 3D кнопка Код
Появление текста вращением Код
Появление текста из глубины Код
Кнопка Появление картинки Код
Кнопка с индикатором Код
Наведение и нажатие.
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
.one < /* Внешний вид кнопки */
color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Минимальный отступ текста от границ кнопки. Определяет размер кнопки */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Радиус закругления уголков */
box-shadow : 0px 1px 3px ; /* Тень */
>
.one:hover < /* Преображение при наведении */
background-image : radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777) ; /* Радиальный градиент, переход цвета от центра к краям */
>
< /style >
< /head >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
.two < /* Внешний вид кнопки */
color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Внутренний отступ текста от границ блока. Определяет размер кнопки */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Радиус закругления уголков */
box-shadow : 0px 1px 3px ; /* Тень */
position : relative ; /* Относительное позиционирование, для установки абсолютного позиционирования для наплывания */
>
.two:before < /* Псевдо элемент для создания наплывания */
content : » ; /* Обязательное свойство псевдоэлемента :before */
position : absolute ; /* Позиционируем абсолютно */
top : 0px ; /* Позиция по границам блока */
left : 0px ;
width : 100% ; /* Ширина по границам кнопки */
height : 0px ; /* Высота 0, поэтому невиден */
background : rgba(148,144,143,0.4) ; /* Фоновый цвет наплывания */
border-radius : 5px ; /* Радиус уголков */
transition : all 0.5s ease-out ; /* Анимация. Движение. Трансформируются все свойства (all) в течении 0.5 секунды, быстро начинается и к концу замедляется (ease-out) */
>
.two:hover:before < /* При наведении */
height : 42px ; /* Высота наплывания становится равной высоте кнопки */
>
< /style >
< /head >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
.three < /* Внешний вид кнопки */
color : #524E49 ; /* Цвет текста в кнопке */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Отступ текста от границ — определяет размер кнопки */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
>
/* Меняем внешний вид при наведении */
.three:hover < /* Добавляем псевдокласс :hover */
background : rgba(0,0,0,0) ;/* Меняем фоновый цвет */
color : #3a7999 ; /* Меняем цвет текста */
box-shadow : inset 0 0 0 3px #3a7999 ; /* Меняем тень */
>
< /style >
< /head >
< body >
< button class color: #008080;">three » onclick color: #008080;»>location.href=’#’; «>Кнопка< /button >
< /body >
< /html >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид кнопки */
.elementy color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Внутренний отступ текста от границ */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
/* Задаём анимацию (перемещение). Для всех действий (all) Время перемещения (0.8 сек.) Направление перемещения (cubic-bezier(0.165, 0.84, 0.44, 1)) */
-webkit-transition : all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) ;
transition : all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) ;
>
/* Эффект при наведении */
.elementy:hover < /* Добавляем псевдокласс :hover */
/* Задаём расстояние, на которое сместится кнопка */
-webkit-transform : translate(10px) ;
transform : translate(10px) ;
box-shadow : 0 5px 15px rgba(0, 0, 0, 0.5) /* Изменяем тень */
>
< /style >
< /head >
< body >
< button class color: #008080;">elementy » onclick color: #008080;»>location.href=’#’; «>Кнопка< /button >
< /body >
< /html >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид кнопки */
.five color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Внутренний отступ */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время анимации (500ms) */
transition : all 500ms ease-out ;
>
/* Эффект при наведении */
.five:hover < /* Добавляем псевдокласс :hover */
transform : skew(10deg) ;/* Задаём действие анимации — отклонение на 10 градусов */
>
< /style >
< /head >
< body >
< button class color: #008080;">five » onclick color: #008080;»>location.href=’#’; «>Кнопка< /button >
< /body >
< /html >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид кнопки */
.six color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Отступ текста от границ. Определяет размер кнопки */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время появления рамки (500ms), быстро начинается потом замедляется (ease-out) */
transition : all 500ms ease-out ;
>
/* Эффект при наведении */
.six:hover < /* Добавляем псевдокласс :hover */
/* Используем несколько теней разного цвета и размера */
box-shadow : 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00 ;
>
< /style >
< /head >
< body >
< button class color: #008080;">six » onclick color: #008080;»>location.href=’#’; «>Кнопка< /button >
< /body >
< /html >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид кнопки */
.seven color : #524E49 ; /* Цвет текста */
background : #fdeaa8 ; /* Фоновый цвет */
padding : 10px ; /* Отступ текста от границ */
font-size : 20px ; /*Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
position : relative ; /* Задаём относительное позиционирование */
transition : all 500ms ease-out ; /* Задаём анимацию с временем выполнения 500ms */
transform-style : preserve-3d ; /* Трансформация показывается как 3D */
>
/* Создаём псевдо элемент — верхняя грань кнопки */
.seven:after < /* Добавляем псевдо элемент :after */
content : ‘Кнопка’ ; /* Текст в псевдо элементе */
position : absolute ; /* Позиционируем абсолютно, относительно основного блока */
top : -50% ;
left : 0px ;
width : 100% ; /* Ширина */
background : #fdeaa8 ; /* Фоновый цвет */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
transform-origin : bottom ; /* Точка, относительно которой будет выполнятся вращение */
transform : rotateX(90deg) ; /* Размещаем в горизонтальной плоскости, в результате чего псевдо элемент не виден */
>
/* Эффект при наведении */
.seven:hover < /* Добавляем псевдо класс :hover */
transform-origin : bottom ; /* Определяем точку, относительно которой происходит вращение */
transform : rotateX(-90deg) ; /* Поворачиваем на 90 градусов */
>
< /style >
< /head >
< body >
< button class color: #008080;">seven » onclick color: #008080;»>location.href=’#’; «>Кнопка< /button >
< /body >
< /html >
Появление вращающегося текста
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид */
.eight background : radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444) ;
background : -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444) ; /* Фоновый цвет — радиальный градиент */
width : 90px ; /* Ширина */
height : 40px ; /* Высота */
padding : 10px ; /* Внутренний отступ */
border-radius : 5px ; /* Закругление углов */
box-shadow : 0px 2px 4px ; /* Тень */
display : inline-block ; /* Встроенный элемент */
position : relative ; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
text-decoration : none ; /* Убираем подчёркивание текста */
>
/* Создаём псевдоэлемент — текст */
.eight:after < /* Добавляем псевдоэлемент :after */
width : 80% ; /* Ширина относительно родительского блока */
color : red ; /* Цвет текста */
font-family : ‘Lucida Console’ ; /* Шрифт текста */
font-size : 18px ; /* Размер текста */
text-align : center ; /* Выравнивание по центру */
content : attr(title) ; /* Текс берётся из атрибута title */
display : block ; /* Блочный элемент */
opacity : 0 ; /* Невидимый */
position : absolute ; /* Позиционируется абсолютно */
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ; /* Точка от которой происходит анимация — центр */
-webkit-transition : all 550ms ease-in-out ;
transition : all 550ms ease-in-out ; /* Анимация. Для всех элементов, время — 550ms, начинается и заканчивается медленно */
-webkit-transform : scale(0) rotate(-360deg) translateY(-50%) ;
transform : scale(0) rotate(-360deg) translateY(-50%) ; /* Вращение на 360 градусов */
z-index : 3 ; /* Поверх всех элементов */
>
/* Эффект при наведении */
.eight:hover:after < /* Добавляем псевдокласс :hover */
opacity : 1 ; /* Видимый */
-webkit-transform : scale(1) rotate(0deg) translateY(-50%) ;
transform : scale(1) rotate(0deg) translateY(-50%) ; /* Точка трансформации — центр */
>
< /style >
< /head >
< body >
< button class color: #008080;">eight » title color: #008080;»>knopka » >< /button >
< /body >
< /html >
Появление текста из глубины
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид */
.nine background : radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444) ;
background : -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444) ; /* Фоновый цвет — радиальный градиент */
width : 90px ; /* Ширина */
height : 40px ; /* Высота */
padding : 10px ; /* Внутренний отступ */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 2px 4px ; /* Тень */
display : inline-block ; /* Встроенный элемент со свойствами блочного */
position : relative ; /* Относительное позиционирование, для абсолютного позиционирования появляющегося текста */
text-decoration : none ; /* Убираем подчёркивание */
>
/* Создаём псевдоэлемент для появляющегося текста */
.nine:after width : 80% ; /* Ширина элемента */
color : red ; /* Цвет текста */
font-family : ‘Lucida Console’ ; /* Шрифт текста */
content : attr(title) ; /* Текст берётся из атрибута title */
display : block ; /* Блочный элемент */
font-size : 18px ; /* Размер текста */
text-align : center ; /* Выравнивание текста по центру */
opacity : 0 ; /* Невидимый */
position : absolute ; /* Позиционируем абсолютно по центру родительского блока */
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ; /* Точка начала трансформации по центру */
-webkit-transform : scale(0) translateY(-50%) ;
transform : scale(0) translateY(-50%) ; /* Масштаб 0 и отодвигаем в глубину */
-webkit-transition : all 550ms ease-in-out ;
transition : all 550ms ease-in-out ; /* Анимация. Для всех элементов (all), время действия 550ms, медленно начинается и заканчивается (ease-in-out) */
z-index : 3 ; /* Поверх всех элементов */
>
/* Эффект при наведении */
.nine:hover:after opacity : 1 ; /* Видимый */
-webkit-transform : scale(1) translateY(-50%) ;
transform : scale(1) translateY(-50%) ; /* Масштаб 1 х 1 (scale(1)), расположение по центру в глубине */
>
< /style >
< /head >
< body >
< button class color: #008080;">nine » title color: #008080;»>knopka » >< /button >
< /body >
< /html >
< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Эффекты для кнопок CSS< /title >
< style >
/* Внешний вид */
.ten color : #524E49 ; /* Цвет текста */
background : #F7E09C ; /* Фоновый цвет */
padding : 10px 35px ; /* Внутренний отступ. Определяет размер кнопки */
font-size : 20px ; /* Размер текста */
border-radius : 5px ; /* Закругление уголков */
box-shadow : 0px 1px 3px ; /* Тень */
position : relative ; /* Относительное позиционирование для абсолютного позиционирования картинки */
>
/* Картинка */
.ten img position : absolute ; /* Позиционируем абсолютно */
top : 7px ; /* По середине */
left : -30px ; /* Выносим за пределы кнопки */
transition : all 200ms ease ; /* Анимация появления. Время анимации 200 ms */
>
/* Эффект при наведении */
.ten:hover img left : 5px ; /* Возвращаем картинку в кнопку */
>
< /style >
< /head >
< body >
< button class color: #008080;">ten » onclick color: #008080;»>location.href=’#’; «>< img src color: #008080;">images/Animation.gif «>Кнопка< /button >
< /body >
< /html >
CSS
.tower position : relative ; /* Оболочка с относительным позиционированием, для абсолютного позиционирования других элементов */
>
/* Внешний вид */
.round position : absolute ; /* Позиционируем абсолютно по оболочке. В этом случае позиции можно не указывать */
width : 70px ; /* Ширина */
height : 70px ; /* Высота */
border : 4px solid hsl(5, 40%, 70%) ; /* Рамка */
border-radius : 50%/50% ; /* Делаем рамку круглой */
background : linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%) ;
background : -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%) ; /* Фоновый цвет — линейный градиент. Цвет задан в формате hsl, но можно задать в любом доступном в веб формате */
сursor : pointer ; /* Курсор в виде ладошки */
transform : rotate(30deg) ; /* Поворачиваем на 30 градусов */
>
/* Эффект при нажатии */
.round:active < /* Добавляем псевдокласс :active */
width : 69px ; /* Уменьшаем ширину */
height : 69px ; /* Уменьшаем высоту */
box-shadow : 0 0 hsl(5, 60%, 60%) ; /* Уменьшаем тень */
border : 3px solid hsl(5, 40%, 70%) ; /* Уменьшаем толщину рамки */
background : linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%) ;
background : -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%) ; /* Изменяем значения линейного градиента */
>
HTML
< div class color: #008080;">tower «>
< a class color: #008080;">round » href=»*»>< /a >
< /div >
Кнопка с индикатором
CSS
/* Оболочка */
.switch width : 70px ; /* Ширина */
height : 70px ; /* Высота */
position : relative ; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
cursor : pointer ; /* Курсор в виде ладошки */
>
/* Внутренний круг */
.dot position : absolute ; /* Позиционируем абсолютно относительно оболочки */
top : 7% ;
left : 7% ;
width : 70px ; /* Ширина */
height : 70px ; /* Высота */
border-radius : 50% ; /* Делаем круг */
background : hsl(0, 0%, 90%) ; /* Фоновый цвет */
box-shadow : /* Многослойная тень, наружная и внутренняя */
0 3px 5px hsl(0, 0%, 75%),
inset 0 1px 0 hsl(0, 0%, 95%),
inset 0 -5px 5px hsl(0, 0%, 75%),
inset 0 5px 5px hsl(0, 0%, 95%) ;
>
/* Наружный круг */
.circ position : absolute ; /* Позиционируем абсолютно относительно оболочки по центру внутреннего */
top : 0 ;
left : 0 ;
width : 82px ; /* Ширина */
height : 82px ; /* Высота */
border-radius : 50% ; /* Делаем круг */
background : linear-gradient(#ccc, #fff) ;
background : -webkit-linear-gradient(#ccc, #fff) ; /* Фоновый цвет — линейный градиент */
box-shadow : /* многослойная внутренняя тень */
inset 0 2px 1px hsl(0, 0%, 75%),
inset 0 -2px hsl(0, 0%, 75%) ;
>
/* Индикатор — псевдоэлемент */
.switch .dot:before content : «» ;
position : absolute ; /* Позиционируем абсолютно по центру */
left : 40% ;
top : 40% ;
width : 20% ; /* Ширина */
height : 20% ; /* Высота */
border-radius : 50% ; /* Делаем круг */
background : radial-gradient(#fff, #333) ;
background : -webkit-radial-gradient(#fff, #333) ; /* Фоновый цвет — радиальный градиент */
>
/* Эффект при нажатии */
.switch:active .dot:before content : «» ;
background : radial-gradient(#fff, #02A829) ;
background : -webkit-radial-gradient(#fff, #02A829) ; /* Меняем цвет индикатора */
>
.switch:active .dot background : radial-gradient(#fff, #ccc) ;
background : -webkit-radial-gradient(#fff, #ccc) ; /* Меняем фоновый цвет внутреннего круга */
width : 69px ; /* Уменьшаем ширину внутреннего круга */
height : 69px ; /* Уменьшаем высоту внутреннего круга */
>
HTML
< div class color: #008080;">switch «>
< div class color: #008080;">circ «>
< span class color: #008080;">dot «>< /span >
< a href ="">< /a >
< /div >
< /div >
CSS
.switch1 width : 75px ;
height : 45px ;
position : relative ;
cursor : pointer ;
>
.dot1 position : absolute ;
top : 7% ;
left : 7% ;
display : block ;
width : 75px ;
height : 45px ;
border-radius : 7px ;
background : linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%)) ;
box-shadow : -3px 5px hsl(0, 0%, 75%),
1px -2px hsl(0, 0%, 75%),
inset 0 0px 5px hsl(0, 0%, 95%),
inset 0 -1px 5px hsl(0, 0%, 95%) ;
z-index : 1 ;
>
.circ1 display : block ;
position : absolute ;
width : 87px ;
height : 57px ;
top : 0 ;
left : 0 ;
background : linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%)) ;
box-shadow :
inset 0 1px 1px hsl(0, 0%, 95%),
inset 0 -1px 1px hsl(0, 0%, 95%) ;
>
.dot1:before content : «Enter» ;
color : hsl(0, 0%, 60%) ;
position : absolute ;
left : 20% ;
top : 15% ;
font-siz e: 20px ;
>
.switch1:active .dot1:before content : «Enter» ;
>
.switch1:active .dot1 background : radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%)) ;
box-shadow : -2px 4px hsl(0, 0%, 75%),
0px -1px hsl(0, 0%, 75%),
inset 0 1px 2px hsl(0, 0%, 95%),
inset 0 -1px 2px hsl(0, 0%, 95%) ;
>
HTML
< div class color: #008080;">switch1 «>
< div class color: #008080;">circ1 «>
< a class color: #008080;">dot1 «>< /a >
< /div >
< /div >
CSS
.blok101 max-width : 60px ;
padding : 1em ;
border-radius : 10px ;
background : rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35)) ;
box-shadow : inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px ;
>
.blok101:hover transform : skewX(10deg) ;
>
.blok101:active color : red ;
max-width : 55px ;
padding : 1em ;
border-radius : 8px ;
background : rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35)) ;
>
HTML
< div class color: #008080;">blok101 «>Кнопка< /div >
Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.
Желаю творческих успехов.
Анимация загрузки кнопок при нажатии на CSS
На веб-странице замечательный дизайн пользовательского интерфейса, как вы можете видеть на изображение. Здесь безусловно нужно пройти на страницу с демонстрацией, и посмотреть полный эффект заданной кнопки. Что по стилистике или дизайну, то здесь получаете потрясающий стиль самого основание, где только используются некоторые эффекты CSS. Возможно, вы уже видели кнопку загрузки на некоторых веб-страницах или формах, которые создают кнопку загрузки. В основном этот стиль кнопок используются в формы входа в систему.
По умолчанию:
При клике на кнопку:
Подключаем шрифтовые знаки:
Скачать файл
.mekalades <
background-image: linear-gradient(to right, #6118b1 0%, #5690f3 100%);
border: 0px solid #35269a;
border-radius: 35px;
font-size: 1rem;
font-weight: bold;
color: #f9f8f8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
transition: all 0.25s ease;
width: 214px;
position: relative;
height: 58px;
overflow: hidden;
>
.mekalades:not(.progruzka):hover <
box-shadow: 0px 2px 15px 0px #2575fc;
>
.mekalades:not(.progruzka):hover i <
transform: translate(7px);
>
.mekalades i <
font-size: 1.45rem;
position: absolute;
left: 0px;
pointer-events: none;
z-index: 10;
background: inherit;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.25s ease;
>
.mekalades .avekstura <
width:130px;
display: block;
position: absolute;
left:60px;
pointer-events: none;
transition: all 0.25s ease;
>
.progruzka-animate <
position:absolute;
width:60px;
height:60px;
z-index:100;
border-radius: 50%;
top: 0;
left:0px;
display:flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: all 0.25s ease;
>
.progruzka-animate:after <
content:»;
width:44px;
height:44px;
border-radius: 50%;
border:3px solid transparent;
border-left: 3px solid #fff;
animation:progruzka infinite 0.8s ease 0.05s;
position:absolute;
>
.progruzka-animate:before <
content:»;
width:44px;
height:44px;
border-radius: 50%;
border:3px solid transparent;
border-left: 3px solid #fff;
animation:progruzka infinite 0.8s linear;
position:absolute;
opacity: 0.6;
>
.mekalades.progruzka <
width:60px;
>
.mekalades.progruzka i <
transform:rotate(-90deg);
padding-bottom: 4px;
padding-left:3px;
>
.mekalades.progruzka .avekstura <
transform:translate(-140px);
>
.mekalades.progruzka .progruzka-animate <
opacity: 1;
>
@keyframes progruzka <
0% <
transform:rotate(0deg);
>
100% <
transform:rotate(360deg);
>
>
document.querySelector(‘.mekalades’).addEventListener(‘click’, (evt) => <
evt.target.classList.add(‘progruzka’)
setTimeout(() => <
evt.target.classList.remove(‘progruzka’)
>, 3000);
>)
Привлекайте внимание, что на многих тематических сайтах это очень важный аргумент, как красивая кнопка загрузки, которая создана только с помощью CSS и некоторого количества JS. Нужно заметить, что в нашем случай с анимационной кнопкой не нужно подключать библиотеки.
Эффекты при нажатии CSS
Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и JavaScript.
Создадим 4 кнопки с разными эффектами. HTML структура:
.mybutton < position: relative; margin-right: 20px; padding: 4px 14px; border: 1px solid lightgreen; background: none; color: #286aab; overflow: visible; cursor: pointer; >.mybutton::after
Стили для анимации первой кнопки.
.mybutton--animate-click-one::after < box-shadow: inset 0 0 0 35px rgba(111, 148, 182, 0); >.mybutton--animate-click-one.mybutton--click::after < animation: anim-animate-click-one 0.6s ease-out forwards; >@keyframes anim-animate-click-one < 0% < opacity: 1; transform: scale3d(0.4, 0.4, 1); >80% < box-shadow: inset 0 0 0 2px lightgreen; opacity: 0.1; >100% < box-shadow: inset 0 0 0 2px lightgreen; opacity: 0; transform: scale3d(1.2, 1.2, 1); >>CSS для анимации второй кнопки.
.mybutton--animate-click-two::after < box-shadow: 0 0 0 3px rgba(111, 148, 182, 0.05); >.mybutton--animate-click-two.mybutton--click::after < animation: anim-animate-click-two 0.5s ease-out forwards; >@keyframes anim-animate-click-two < 0% < box-shadow: 0 0 0 3px lightgreen; opacity: 1; transform: scale3d(0.6, 0.6, 1); >100% < box-shadow: 0 0 0 100px rgb(110, 180, 110); opacity: 0; transform: scale3d(1, 1, 1); >>Эффекты для третьей кнопки:
.mybutton--animate-click-three::after < background: lightgreen; >.mybutton--animate-click-three.mybutton--click::after < animation: anim-nimate-click-three 0.5s forwards; >@keyframes anim-nimate-click-three < 0% < opacity: 1; transform: scale3d(0.1, 0.1, 1); >100% < opacity: 0; transform: scale3d(8, 8, 1); >>Будьте внимательны, должен быть подключен jQuery.
Добавление и удаление класса для появления анимации при нажатии на кнопку:
jQuery(($) => < $(".mybutton--animate-click-one, .mybutton--animate-click-two, .mybutton--animate-click-three") .click(function () < return _this = this, $(_this).stop().addClass("mybutton--click"), setTimeout(function () < $(_this).removeClass("mybutton--click"); >, 600); >); >);Первый эффект Второй эффект Третий эффект
Добавим эффекты на чистом JavaScript
Нативный JavaScript будет следующий.
document.addEventListener("DOMContentLoaded", () => < document.querySelectorAll(".beautiEff .mybutton").forEach(function (el) < el.addEventListener("click", function () < el.classList.add("mybutton--click"), setTimeout(function () < el.classList.remove("mybutton--click"); >, 600); >); >); >);Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы