Эффекты при нажатии кнопки css

Эффекты при нажатии CSS

Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и JavaScript.

Создадим 4 кнопки с разными эффектами. HTML структура:

 Первый эффект при нажатии  Второй эффект при нажатии  Третий эффект при нажатии 

Стили для анимации первой кнопки.

.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.

Добавление и удаление класса для появления анимации при нажатии на кнопку:

Первый эффект Второй эффект Третий эффект

Добавим эффекты на чистом 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.

Статьи из данной категории:

Источник

20 CSS Button Click Effects

Collection of hand-picked free HTML and CSS button click effect code examples from codepen and other resources. Update of February 2019 collection. 6 new items.

Related Articles

Author

Links

Made with

About a code

Subtle Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Button Click Pulsing Effect

Pure CSS button style. Pulsing effect on click with no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Copy Button Click Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Material UI Stretch Button

Delightful Material UI stretch button built by clipping paths.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

SCSS Beveled Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Ripple Button with Few JavaScript

Just a simple retro’ish ripple button with few Javascript codes for smoother animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS-only Ripple Effect Button

A CSS-only toggle button with dynamic inverse text colour. The animated radial-gradient is achieved by scaling a pseudo element that sits in front of the text. The dynamic text colour uses mix-blend-mode: difference .

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sweet Little Button Mixin

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Black Biometirics Login Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Delete Button with Micro-Interactions

Playing with micro-interactions, adding some micro-interactions on a delete button/trash icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Add To Collection Button

Simple animation if you add smth to a collection for example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Bubbly Button with Click Animation

Made the bubbles using radial-gradient for background-image . This property is so cool that you can draw many things without adding extra div s or pseudo elements ( ::before and ::after )

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

Как сделать эффект нажатия при клике на кнопку, используя CSS и JavaScript

Для продвинутого дизайна сайтов и приложений часто используют дополнительные эффекты при нажатии на кнопку. Давайте разберем, как реализовать это, используя CSS и ванильный Javascript.

• при загрузке страницы добавляем обработчик событий на кнопку
• при клике добавляем кнопке определенный класс, который удаляем через N времени
• у этого класса задаем CSS анимацию с необходимыми эффектами

Давайте разберем на конкретном примере.

Сначала создайте простой каркас страницы с кнопкой:

Теперь зададим базовые стили для страницы и кнопки (они необязательны, это для красоты примера).

/* Убираем отстыпы по умолчанию */ body, html { margin: 0; padding: 0; } .main { /* Задаем высоту и стили общего блока */ height: 400px; background-color: #f5f5f5; /* Выравниваем кнопку по центру */ display: flex; justify-content: center; align-items: center; } .button { background-color: #000; color: #fff; padding: .75em 1.5em; cursor: pointer; transition: box-shadow 200ms linear; } .button:hover { box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.15), 0 .4em .5em -.4em rgba(0, 0, 0, 0.4); }

А вот обязательный CSS — сам эффект при нажатии.

.button { position: relative; } .button:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 35px rgba(0,0,0,0.1); display: none; } .button.click:after { animation: animate-click 0.6s ease-out forwards; display: block; } @keyframes animate-click { 0% { opacity: 1; transform: scale3d(0.4, 0.4, 1); } 80% { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); opacity: 0.1; } 100% { opacity: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); transform: scale3d(1.2, 1.2, 1); } }

Разберем как это работает. Сначала добавляем после кнопки блок эффекта, задаем ему размеры и позиционирование. По умолчанию блок скрыт. У него есть внутренняя тень, которая заполняет почти весь блок.

Далее прописываем анимацию, если у кнопки добавлен класс .click. Обычно анимацию добавляют, например, при наведении на элемент, но в нашем примере класс будет добавляться блоку скриптом. И анимация будет срабатывать каждый раз, когда у кнопки появляется этот .click. Без скрипта такая анимация сработает просто при загрузке страницы.

Прописываем саму анимацию. Сначала блок уменьшается в размерах до 40% свойством transform: scale3d(0.4, 0.4, 1); . Потом следует плавное снижение прозрачности и уменьшение внутренней тени, то есть она стягивается от центра к краям, что визуально выглядит, как увеличение блока. При этом сам блок увеличивается, становясь прозрачным, это добавляет эффект волнообразного исчезания тени, как будто она догоняет расширяющийся блок.

Можно изменять цвет, время анимации, изначальный размер блока, размер при сжатии и увеличении, чтобы добиться желаемого эффекта. Теперь осталось добавить JS код.

// После загрузки документа document.addEventListener("DOMContentLoaded", () => { // Определяем блок кнопки const button = document.querySelector('.button'); // Вешаем прослушиватель события по клику на кнопку button.addEventListener("click", (event) => { // Определяем элемент по которому кликнули const elem = event.target; elem.classList.add('click'); // Добавляем блоку класс .click setTimeout(function() { elem.classList.remove('click'); // Удаляем класс .click через 400ms }, 400); }); });

Вот и все, теперь у нас есть кнопки с эффектом при клике. Если Вам понравилась статья, можете поделиться ей в соцсетях и отложить в закладки, чтобы подсмотреть при необходимости. Спасибо за прочтение 🙂

Источник