Различные виды кнопок для рукоделия, красивые кнопки заказать оптом и в розницу
101 товаров
фильтры
Фильтры
По популярности
- Сначала недорогие
- Сначала дорогие
- По размеру скидки
- Сначала новые
- Новые в конце
- По популярности
- По просмотрам
На странице:
- 40
- 80
- 160
Кнопки со скидкойSale
Кнопки оптомОпт
Быстрый просмотр
90 руб
Кнопки на тесьме пластик «BLITZ» d 8мм
Артикул
F8412
Быстрый просмотр
330 руб
Кнопки пришивные SF-001 металл «Gamma» d 7-12 мм 40 шт.
Артикул
F2287
Быстрый просмотр
122 руб
Кнопки пришивные KLM-210 металл «Gamma» d 21мм 10 шт. под медь
Артикул
F2277
Быстрый просмотр
36 руб
Кнопки металл нержавеющий сплав «Micron» d 15мм.
, 1шт. №06 черный никель
Артикул
F7560
Быстрый просмотр
50 руб
Кнопки металл KT 07 d 20 мм Бронза
Артикул
F7554
Быстрый просмотр
59 руб
Кнопки пришивные KLM-100 металл «Gamma» d 10 мм 10 шт. под золото
Артикул
F2240
Быстрый просмотр
61 руб
Кнопки пришивные KLM-085 металл «Gamma» d 8.5 мм 10 шт. под бронзу
Артикул
F2235
Быстрый просмотр
80 руб
Кнопки пришивные KLM-100 металл «Gamma» d 10 мм 10 шт. под медь
Артикул
F2269
Быстрый просмотр
90 руб
Кнопки пришивные KL-082 металл «Gamma» d 8.2 мм 10 шт. никель
Артикул
F2260
Быстрый просмотр
100 руб
Кнопки пришивные PKL-15 пластик «Gamma» d 15 мм 10 шт. прозрачный
Артикул
F2310
Быстрый просмотр
130 руб
Кнопки пришивные PKL-17 пластик «Gamma» d 17 мм 10 шт. №03 прозрачный
Артикул
F2322
Быстрый просмотр
131 руб
Кнопки пришивные PKL-15 пластик «Gamma» d 15 мм 10 шт.
черный
Артикул
F2541
Быстрый просмотр
160 руб
Кнопки пришивные KL-140 металл «Gamma» d 14 мм 10 шт. под никель
Артикул
F2274
Быстрый просмотр
189 руб
Кнопки пришивные PKL-20 пластик «Gamma» d 20 мм 10 шт. Черный
Артикул
F2283
Быстрый просмотр
29 руб
Кнопки металл KT 07 d 20 мм Черный никель
Артикул
F7556
Быстрый просмотр
29 руб
Кнопки металл KT 07 d 20 мм Никель
Артикул
F7555
Быстрый просмотр
60 руб
Кнопки металл нержавеющий сплав «Micron» d 15мм., 1шт. №24 бронза
Артикул
F7561
Быстрый просмотр
60 руб
Кнопки металл нержавеющий сплав «Micron» d 15мм., 1шт. №04 никель
Артикул
F7559
Быстрый просмотр
87 руб
Кнопки пришивные KL-070 металл «Gamma» d 7 мм 10 шт. никель
Артикул
F2257
Быстрый просмотр
110 руб
Кнопки пришивные PKL-13 пластик «Gamma» d 13 мм 10 шт.
Артикул
F2321
Быстрый просмотр
116 руб
Кнопки пришивные PKL-13 пластик «Gamma» d 13 мм 10 шт. Белый
Артикул
F2307
Быстрый просмотр
116 руб
Кнопки пришивные PKL-13 пластик «Gamma» d 13 мм 10 шт. Черный
Артикул
F2333
Быстрый просмотр
116 руб
Кнопки пришивные KLM-100 металл «Gamma» d 10 мм 10 шт. под бронзу
Артикул
F2294
Быстрый просмотр
123 руб
Кнопки пришивные PKL-25 пластик «Gamma» d 25 мм 10 шт. Прозрачный
Артикул
F2284
Быстрый просмотр
130 руб
Кнопки пришивные KLM-170 металл «Gamma» d 17 мм 10 шт. под золото
Артикул
F2239
Быстрый просмотр
162 руб
Кнопки пришивные KLQ-21 металл «Gamma» d 21 мм 5 шт. под золото
Артикул
F2281
Быстрый просмотр
174 руб
Кнопки пришивные KLM-150 металл «Gamma» d 15 мм 10 шт. под бронзу
Артикул
F2237
Быстрый просмотр
189 руб
Кнопки пришивные PKL-20 пластик «Gamma» d 20 мм 10 шт.
Прозрачный
Артикул
F2288
Быстрый просмотр
190 руб
Кнопки пришивные KL-160 металл «Gamma» d 16 мм 10 шт. под никель
Артикул
F2253
Быстрый просмотр
198 руб
Магнитная кнопка на прокол 10 мм
Артикул
F7251
Быстрый просмотр
237 руб
Кнопки пришивные KLM-250 металл «Gamma» d 25 мм 10 шт. №05 под золото
Артикул
F2267
Быстрый просмотр
250 руб
Магнитная кнопка на прокол 18 мм
Артикул
F7250
Быстрый просмотр
261 руб
Кнопки пришивные KL-210 металл «Gamma» d 21 мм 10 шт. №02 под черный никель
Артикул
F2292
Быстрый просмотр
266 руб
Кнопки пришивные KLM-250 металл «Gamma» d 25 мм 10 шт. под медь
Артикул
F2234
Быстрый просмотр
290 руб
Кнопки пришивные KLM-210 металл «Gamma» d 21мм 10 шт. под бронзу
Артикул
F2270
Быстрый просмотр
319 руб
Кнопки пришивные KLM-300 металл «Gamma» d 30 мм 10 шт под золото
Артикул
F2254
Быстрый просмотр
386 руб
Кнопки рубашечные «Baby» металл 16 «KOH-I-NOOR» d 9.
7 мм 15 шт. 998 фиолетовый
Артикул
F9577
Быстрый просмотр
386 руб
Кнопки рубашечные «Baby» металл 16 «KOH-I-NOOR» d 9.7 мм 15 шт. 983 зеленый
Артикул
F9576
Быстрый просмотр
386 руб
Кнопки рубашечные «Baby» металл 16 «KOH-I-NOOR» d 9.7 мм 15 шт. 963 св. какао
Артикул
F9572
Быстрый просмотр
386 руб
Кнопки рубашечные «Baby» металл 16 «KOH-I-NOOR» d 9.7 мм 15 шт. 961 бежевые
Артикул
F9571
Показать ещё
Кнопка : Button : UIkit 2
Создавайте красивые кнопки, применяйте разные стили.
- Применение
- Модификаторы цвета
- Модификаторы размера
- Группа кнопок
- JavaScript
- Checkbox Buttons
- Radio Buttons
- Кнопка с Dropdown
- Группа кнопок с Dropdown
Применение
.
uk-button к элементу 
uk-button<a> или <button>. Готово! Вы создали кнопку! Чтобы отображать кнопку в выключенном состоянии, добавьте атрибут disabled к элементу <button>.Пример
Ссылка
Разметка
<a href="">...</a> <button type="button">...</button> <button type="button" disabled>...</button>
Примечание Если вы отображаете несколько кнопок в ряду, вы можете добавить к ним верхний отступ, когда они располагаются на маленьких девайсах друг под другом. Добавьте атрибут data-uk-margin из компонента Utility к их родительскому элементу.
Модификаторы цвета
В компоненте доступно несколько модификаторов цвета по умолчанию. Добавьте один из следующих классов, чтобы применить необходимый вид.
| Пример | Класс | Описание |
|---|---|---|
. | Акцентирует внимание, чаще используется для обозначения основного действия. | |
.uk-button-success | Указывает на успешное или положительное действие. | |
.uk-button-danger | Указывает на опасное или предупреждающее действие. | |
| Ссылка | .uk-button-link | Позволяет преобразовать кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента |
Разметка
<button type="button">Danger кнопка</button>
Модификаторы размера
Добавьте к кнопке класс .uk-button-mini, .uk-button-small или .uk-button-large, чтобы сделать её больше или меньше.
Примеры
Разметка
<button type="button">Большая кнопка</button>
Кнопка на всю рабочую ширину
Добавьте к кнопке класс . из компонента Grid и кнопка займет всю доступную ширину на 100%.
uk-width-1-1
Пример
Разметка
<button>Кнопка</button> <button>Кнопка</button>
Группа кнопок
Чтобы создать группу кнопок, добавьте класс .uk-button-group
<div> вокруг кнопок. На этом всё! Никакой дополнительной разметки не требуется.Пример
Ссылка
Ссылка
Ссылка
Ссылка
Разметка
<div>
<a href="">...</a>
<button>...</button>
<button>...</button>
</div>JavaScript
Вы можете переключать состояния кнопок через JavaScript. Просто добавьте data-атрибут data-uk-button.
Пример
Разметка
<button type="button" data-uk-button>Кнопка</button>
Checkbox buttons
Переключайтесь между группой кнопок, по типу флажка *checkbox, оборачивая их в элемент <div> с data-атрибутом data-uk-button-checkbox.
Это также может быть применено к группе кнопок.
Пример
Разметка
<div data-uk-button-checkbox>
<button>...</button>
<button>...</button>
<button>...</button>
</div>
<div data-uk-button-checkbox>
<button>...</button>
<button>...</button>
<button>...</button>
</div>Radio buttons
Переключайтесь между группой кнопок, по типу радиокнопки *radio, div, оборачивая их в элемент <div> с data-атрибутом data-uk-button-radio. Это также может быть применено к группе кнопок.
Пример
Разметка
<div data-uk-button-radio>
<button>...</button>
<button>...</button>
<button>...</button>
</div>
<div data-uk-button-radio>
<button>...</button>
<button>...</button>
<button>. ..</button>
</div>
..</button>
</div>Кнопка с Dropdown
Кнопка может быть использована для вызова выпадающего меню из компонента Dropdown. Добавьте класс .uk-button-dropdown и атрибут data-uk-dropdown к элементу <div>, который содержит кнопку и сам выпадающий список.
Пример
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
Разметка
<!-- Это контейнер, включающий JavaScript -->
<div data-uk-dropdown>
<!-- Это кнопка переключения Dropdown -->
<button>Dropdown</button>
<!-- Это Dropdown -->
<div>
<ul>
<li><a href="">. ..</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>
..</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>Группа кнопок с Dropdown
Используйте группы кнопок, чтобы разделить кнопки на стандартные действия слева и выпадающий переключатель справа. Оберните элемент <div> вокруг кнопки и раскрывающегося списка dropdown и добавьте атрибут data-uk-dropdown="{mode:'click'}" . Выпадающий список также может быть применен к кнопке в группе кнопок.
Пример
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
- Раздел
- Еще один
- Раздел
- Еще один
- Отдельный пункт
Разметка
<div>
<!-- Это кнопка -->
<button>Кнопка</button>
<!-- Это контейнер, включающий JavaScript -->
<div data-uk-dropdown="{mode:'click'}">
<!-- Это кнопка переключения Dropdown -->
<a href="">. ..</a>
<!-- Это Dropdown -->
<div>
<ul>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>
</div>
..</a>
<!-- Это Dropdown -->
<div>
<ul>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
</div>
</div>34 кнопки Bootstrap
Коллекция бесплатных пользовательских кнопок Bootstrap примеров кода: 3d, анимированная, градиентная, контурная, круглая, социальная и т. д. Обновление коллекции за июнь 2020 года. 13 новых предметов.
- Кнопки CSS
- Кнопки реакции
- Кнопки JavaScript
- Кнопки jQuery
- Кнопки попутного ветра
О коде
Кнопки начальной загрузки V12
Если вам нравится темный/черный дизайн, эти бесплатные темные кнопки идеально подойдут для размещения на вашем веб-сайте. Они бывают разных стилей и размеров, вы даже получаете кнопки социальных сетей и флажки, и это лишь некоторые из них.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: ionicons.css, jquery.js, popper.js
Версия начальной загрузки: 4.5.3
О коде
Кнопки начальной загрузки V18
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: ionicons.css, jquery.js, popper.js
Версия начальной загрузки: 4.5.3
О коде
Кнопки начальной загрузки V19
Коллекция лучших бесплатных квадратных кнопок привлекательных цветов, которые привлекут внимание ваших пользователей с самого начала. Кроме того, кнопки также имеют значки и эффект наведения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: ionicons.css, jquery.js, popper.js
Версия начальной загрузки: 4.5.3
С код
Кнопки начальной загрузки V10
Вместо того, чтобы использовать сплошные кнопки на своем веб-сайте, используйте любую из этой коллекции бесплатных кнопок Bootstrap с контуром.
Теперь вы можете пойти против течения с не слишком традиционным стилем кнопок.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: ionicons.css, jquery.js, popper.js
Версия начальной загрузки: 4.5.3
О коде
Кнопки начальной загрузки V2
Вместо того, чтобы создавать собственный набор кнопок для вашего онлайн-проекта или веб-сайта, вам поможет этот бесплатный набор творческих кнопок. Они просты в использовании и бывают самых разных стилей и вариаций.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: ionicons.css, jquery.js, popper.js
Версия начальной загрузки: 4.5.3
О коде
Кнопка CSS/Bootstrap, которая раскрывает ввод
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
Версия начальной загрузки: 3.
0.2
О коде
Стиль кнопки Bootstrap 114
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.3.0
О коде
Стиль кнопки Bootstrap 115
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.3.0
О коде
Стиль кнопки Bootstrap 116
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.3.0
О коде
Стиль кнопки Bootstrap 39
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.3.0
О коде
Стиль кнопки Bootstrap 97
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.
3.0
О коде
Bootstrap Анимированная кнопка воспроизведения
Используя анимацию CSS и псевдоэлементы, создайте красивую анимированную кнопку воспроизведения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
Версия начальной загрузки: 4.3.1
О коде
Кнопка загрузки/градиента Neumorphism
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 4.1.3
О коде
Кнопка частиц
Кнопка с блестящими частицами.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
Версия начальной загрузки: 4.4.1
О коде
Кнопка круга начальной загрузки
Создайте свои собственные круглые кнопки со значками в Bootstrap 4.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
Версия начальной загрузки: 4.1.0
О коде
Пользовательская группа кнопок начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
Версия начальной загрузки: 3.3.7
О коде
Кнопка начальной загрузки 3D
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 3.0.0
О коде
Кнопка начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Версия начальной загрузки: 4.0.0
О коде
Эффект загрузки кнопки начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.
js
Версия начальной загрузки: 3.3.6
О коде
Кнопки Bootstrap Material Design
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Кнопки начальной загрузки
Пользовательские стили кнопки Bootstrap с помощью SCSS. Руководство по стилю для индивидуальных проектов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
Версия начальной загрузки: 3.3.4
О коде
Кнопки очистки Bootstrap
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
Версия начальной загрузки: 3.3.2
О коде
Мертвые простые ссылки для обмена контентом в WordPress с использованием групп кнопок Bootstrap.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
Версия начальной загрузки: 3.0.0
О коде
Кнопка градиента Bootstrap
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
Версия начальной загрузки: 4.1.1
О коде
Кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
Версия начальной загрузки: 4.1.1
О коде
Bootstrap 4 Awesome Кнопка разного размера с шрифтом Awesome
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: нет
Зависимости: font-awesome.css, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Bootstrap 4 Кнопка анимации отскока
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.
css, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Bootstrap 4 Кнопка анимации Swing Onclick
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Кнопка анимации Bootstrap 4 Pulse
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Bootstrap 4 Кнопка анимации RubberBand
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Bootstrap 4 Кнопка анимации встряхивания Onclick
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.
js
Версия начальной загрузки: 4.0.0
С код
Кнопки — Material Design и Bootstrap 4
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: mdbootstrap.css, font-awesome.css, mdbootstrap.js
Версия начальной загрузки: 4.0.0
О коде
Кнопки со стрелками
Кнопки со стрелками для Bootstrap 3.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: нет
Зависимости: —
Версия начальной загрузки: 3.3.1
102 кнопки JavaScript
Коллекция бесплатных ванильных кнопок JavaScript примеров кода: анимированных, множественных, подтверждающих, удаляющих, загружающих/выгружающих, отправляющих и с эффектами наведения/щелчка/удерживания . Обновление коллекции апреля 2020 года. 62 новинки.
- Кнопки CSS
- Кнопки начальной загрузки
- Кнопки jQuery
- Кнопки реакции
- Кнопки попутного ветра
youtube.com/embed/OOuh2RhS6p8″ frameborder=»0″ allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»> О коде
Добавить на карту — Микровзаимодействие
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Нажмите, чтобы отправить
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Нажмите кнопку
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Кнопка DevTo
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Волнистая кнопка наведения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: zepto.
js, gsap.js
О коде
Медведь Пять Нравится Кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка 3D-паузы
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация магнитной кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка «Добавить в корзину»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка оплаты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
С код
Кнопка пожертвования монетки
Простая идея, которую оказалось очень трудно реализовать.
В этом эксперименте не используются никакие 3D-элементы или преобразования, только 2D-элементы и немного умной математики, чтобы создать иллюзию 3D-монеты реальной толщины. Подбрасывание монет на самом деле также рандомизировано — если вы нажмете кнопку несколько раз, вы увидите.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Магнитная кнопка Corsair
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Плавающая кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопки отписки
Некоторые нелепые кнопки отмены подписки, предназначенные для того, чтобы пользователь чувствовал себя плохо из-за отказа от подписки — хотя и не всерьез. Этот проект в значительной степени опирается на анимацию SVG и CSS, и внешние библиотеки не используются.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Не позволяйте двери ударить вас на пути к выходу
В этом стилусе активно используются переменные CSS и переходы к элементам SVG. Анимация всех конечностей фигурки — утомительная работа, но она окупается, когда вы видите готовый продукт.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Неоморфизм — волновая анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Прокрутите до верхней кнопки с помощью Vanilla JS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка «Нравится»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.
js
О коде
Кнопка Загрузка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: boxicons.css
О коде
Переворот, запускаемый прокруткой. Плавающая кнопка действия, переход
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Супер забавные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка взаимодействия (GSAP)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Анимированная кнопка «Поделиться» с использованием HTML, CSS и JS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Нравится анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка любви
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект пульсации кнопки (материальный дизайн)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Любимая кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.
js
О коде
Блестящие пуговицы
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Магнитные кнопки
Небольшой набор магнитных кнопок с забавной анимацией при наведении.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Нравится анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Скачать анимацию
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка «Нравится»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Добавить в корзину
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Микровзаимодействие анимации прогресса загрузки с GSAP
При первом нажатии форма кнопки станет круглой.
Затем кнопка станет индикатором выполнения, а над индикатором выполнения будет отображаться «облачко речи». Этот «речевой пузырь» показывает процент выполнения загрузки. «Речевой пузырь» наклонится, когда начнется прогресс. После того, как загрузка будет завершена, кнопка превратится в зеленый кружок, затем появится галочка, указывающая на то, что загрузка уже выполнена. Через 5 секунд кнопка вернется в нормальное состояние.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Я ❤️ Это
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tailwind.css, alpine.js
О коде
Закладка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.
js
О коде
Кнопки воспроизведения в случайном порядке
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка загрузки значка морфинга
Анимация загрузки, в которой стрелка и область уведомлений сливаются в индикатор выполнения, который вскоре станет галочкой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка «Нравится» GSAP
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: gsap.js
О коде
Перетащите для подтверждения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Анимация кнопки отправки GSAP
Анимация кнопки с использованием библиотеки анимации GSAP.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка отправки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка бумажного самолетика
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Мягкая рябь Взаимодействие
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: softripple.js
О коде
Кнопка бумажного самолетика
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Взаимодействие магнитного парения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.
css, gsap.js, ionicons.js
О коде
Анимация нажатия кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка 3D
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: three.js, gsap.js
О коде
Конфетти «Большие пальцы вверх»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка «Мне нравится»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: gsap.js
О коде
Кнопка отправки
Необычный подход к кнопке отправки с индикатором выполнения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: anime.
js
О коде
Анимация кнопки «Пожертвовать»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: простая маска-деньги.js
О коде
Ужасные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: splitting.js
О коде
Пуговица для футболки Cannon
Пуговица на футболке с зеленым носком.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: splitting.js, gsap.js
О коде
Кнопка подтверждения конфетти
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Наведение на изгиб кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.
js
О коде
Кнопка корзины
Кнопка «Удалить» с анимированной корзиной в ванильном JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка конфетти
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка отмены подписки
Подводные камни при попытке отписаться в 2020 году.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: splitting.css, splitting.js
О коде
Сжать файлы
Простое микровзаимодействие с кнопкой «Файл-архив».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопки переключения сетки/списка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Удалить анимацию кнопки
Простое микровзаимодействие «Кнопка удаления» в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Загрузка и загрузка анимаций при наведении курсора
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: нет
Зависимости: gsap.js
О коде
Кнопка Smash To Submit
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Наведение кнопки загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.js
С код
Анимация рисования кнопок
Анимация псевдоэлементов для создания эффекта рисования кнопки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация состояний кнопок
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.
css
О коде
Кнопка «Мне нравится пиво»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Анимация кнопки корзины
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка загрузки файла
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Поппер для пуговиц
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
РАЗБИТЬ кнопку «Нравится»
Избранная кнопка, микро-взаимодействие в JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Неоморфизм, Сердечный
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Добавить в корзину Анимация
Крутая анимация добавления в корзину с помощью JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Пуговицы из материала
Попрактикуйтесь с пользовательскими свойствами, clip-path , псевдоэлементами и CSS в целом, чтобы создать ряд кнопок, вдохновленных пользовательским интерфейсом материала. С достаточным количеством JavaScript, чтобы сделать события мыши особенными.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Скачать анимацию прогресса
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Мультикнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Анимация кнопки заказа
Анимированная кнопка подтверждения заказа с HTML, CSS и небольшим количеством JavaScript,
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.
js
О коде
Нажмите и удерживайте кнопку
Поэкспериментируйте с синтаксисом SVG и переходами CSS, чтобы создать кнопку, позволяющую открыть еще три параметра.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
С код
Кнопка обработки
Микроанимации для кнопки, которая отправляет, обрабатывает и подтверждает взаимодействие.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка + Холст = Удивительно
Использование элемента холста, чтобы вывести эффекты наведения на кнопку на новый уровень! Это всего лишь несколько примеров использования того же подхода с частицами, а теперь представьте безграничные возможности!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Динамический движущийся фон кнопки-таблетки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Мультикнопки — Животные
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.
css
О коде
Многокнопочная таблетка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Неоморфные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка загрузки с отказом
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Кнопка загрузки SVG CSS JS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопки загрузки
Некоторые кнопки загрузки анимации.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: gsap.js
О коде
Кнопка воспроизведения и паузы
Кнопка воспроизведения.
Несколько забавных экспериментов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффекты наведения на кнопку
Еще несколько относительно простых эффектов наведения на кнопку.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Загрузка Взаимодействие
Классное взаимодействие загрузки в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка добавления/удаления
Исследование микровзаимодействия с добавлением кнопки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка — удерживайте для подтверждения
Попытка другого типа кнопки, когда требуется дополнительное подтверждение — например, если вы что-то публикуете или удаляете.
Вам нужно будет нажать кнопку в течение почти 2 секунд для успеха.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Кнопка запуска ракеты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Программные кнопки пользовательского интерфейса Neumorphism
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка музыкального проигрывателя
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Easy Buttons для холста с ZIMjs
Простые кнопки с ролловерами, подложками, значками, состояниями переключения и ожидания, шаблонами, вкладками и многим другим! ZIM предоставляет удобства JavaScript, компоненты и элементы управления для Canvas и работает на основе CreateJS с его твердой моделью растровых объектов (BOM).
