Бесконечный CodePen. 9 демок для тех, кто любит делать красиво — журнал «Доктайп»
- 15 февраля 2022
HTML
Евгений Шкляр
Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.
Accent-color w/custom properties
Начнём с простого и будем постепенно разгоняться. Здесь у нас стилизация чекбоксов с помощью кастомных свойств. Изящное решение, с которым проще всего разобраться.
See the Pen Accent-color w/custom properties [updated] by Michelle Barker (@michellebarker) on CodePen.
Lotsa Notifications
Красивые всплывающие уведомления с разными наборами кнопок и стилизацией. Подойдут и для уведомления о завершении загрузки, и о неотправленном письме, и о сработавшем будильнике.
Login Form with floating placeholder and light button
Как следует из названия, форма входа на сайт со светящейся кнопкой и плейсхолдером, который сдвигается при клике.
See the Pen Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani) on CodePen.
Candy Color Button Animation
Два десятка анимированных кнопок на чистом CSS. Градиенты, анимация при наведении, перекраска, вращение и другие эффекты.
Buttons. CSS Hover
Ещё немного кнопок — на этот раз hover-эффекты во всей красе.
See the Pen Buttons. CSS Hover by Marina Osadcha (@Marina_Os) on CodePen.
Download Button Animation
Кнопок много не бывает — поэтому вот вам ещё. Смешные анимации на кнопке загрузки, напоминающие спуск шторы. HTML, SCSS, JavaScript.
See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.
Social Media Icons with Popups
Последние кнопки на сегодня. Многие могут захотеть встроить себе в портфолио красивую ссылку на Гитхаб или другую соцсеть — теперь можно это сделать с красивой всплывашкой.
See the Pen
Social Media Icons with Popups (HTML + Pure CSS Only) by Abdelrhman Said (@abdelrhmansaid)
on CodePen.
Impossible Checkbox v2
Наверняка вы видели видео с «невозможной коробкой» — нажимаете на переключатель, а через пару секунд вылезает палец и расщёлкивает кнопку. Наконец-то кто-то сделал это и в вебе — посмотрите, какая прекрасная лапка. Она и замыкает нашу подборку на сегодня.
See the Pen Impossible Checkbox v2 ???? by Jhey (@jh4y) on CodePen.
На этом сегодня всё — если со всеми пенами разбираться внимательно, хватит как раз до следующего выпуска.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
Читать дальше
Растровая и векторная графика
Отличия, преимущества, применение.
HTML- 13 июня 2023
Как понять, что перед вами заголовок
Не всё, что кажется заголовком, им является.
HTML- 8 июня 2023
Как правильно вставлять SVG
Правильного способа нет.
Есть подходящие.
- 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset
Два актуальных способа
HTML- 25 мая 2023
Текст с новой строки в HTML. Все способы
Как не запутаться, выбирая тег.
HTML- 24 мая 2023
Как сделать таблицу в HTML
Шаблон таблицы для любого случая.
HTML- 16 мая 2023
search: новый HTML-элемент в 2023
Перевод статьи Альваро Монторо о новом теге для поиска.
HTML- 12 мая 2023
Как сверстать доступный сайт
Что важно учесть, чтобы сайтом смогли пользоваться все.
HTML- 11 мая 2023
Что такое спецификация и как её читать
И научиться применять знания.
HTML- 13 апреля 2023
В каких браузерах тестировать вёрстку в 2023
Понятная инструкция для тех, кто запутался в хромиумах.
- 11 апреля 2023
Навигация, элементы форм, кнопки и ещё несколько полезностей на HTML и CSS
Сегодняшний наш пост посвящен подборке разных полезностей для верстальщика и дизайнера. Тут собрано несколько уроков и исходных файлов, которые выглядят очень красиво и стильно. А именно Вы тут можете встретить несколько красивых примеров типографики, которую Вы можете использовать на сайте, бесплатные уроки по созданию кнопок, а также бесплатные исходники, которые можно скачать, несколько красивых элементов форм, такие как чекбоксы и поля, и ещё самое вкусное это уроки по навигации и бесплатные их исходники.
Рекомендуем также посмотреть:
- HTML5 элементы для лучшей семантики текста
- Подборка полезных и разнообразных CSS библиотек для веб мастера
- Скачать бесплатные адаптивные блоки на CSS для создания стильного сайта
1.
3D типографика на CSSПерейти
2. Текстовый эффект в Американском стиле
Перейти
3. Неоновый эффект для текста на CSS
Перейти
4. 3D кнопка с прогресс баром на CSS
Перейти
5. Иконка гамбургер для навигации на HTML
Перейти
6. Двойные кнопки на CSS
Перейти
7. Адаптивное меню которое плавно выезжает
Перейти
8. Адаптивное меню на HTML canvas
Перейти
9. Фиксированная и вертикальная навигация
Перейти
10. Ещё одна крутая навигация на CSS
Перейти
11. Стильное и классное меню на HTML
Перейти
12. Переключатели в стиле Flat бесплатно
Перейти
13. Форма с красивой анимацией
Перейти
14.
Красивый слайдер на CSSПерейти
15. Красивые и анимационные чекбоксы
Перейти
16. Вкладка CSS
Перейти
17. Анимационные блоки в стиле Flat
Перейти
Узнать больше интересного:
Найкращі кольорові схеми та естетичні ідеї Instagram
Photoshop Action, щоб додати старовинні ефекти до вашої фотографії
Векторная коллекция на тему Рыбалки
Потужний набір спортивних іконок
Затишні осінні візерунки для поповнення вашої колекції
Найкращі шрифти трафарету для дизайнерів (безкоштовно та преміум)
Як створити власний шрифт: поради, підказки та ресурси
Повна колекція генераторів CSS
Екстравагантна колекція квіткових візерунків для дизайнерських потреб
Створіть колаж з 3D -ефектом в Adobe Photoshop
Конфіденційність і файли cookie: цей сайт використовує файли cookie.
Продовжуючи використовувати цей веб-сайт, ви погоджуєтесь на їх використання.
Щоб дізнатися більше, включно з тим, як контролювати файли cookie, див. тут:
Політика використання файлів Cookie
Новые статьи
лучших красивых кнопок CSS по версии CSS Scan Alternatives — 2023
11 отзывов219
голосов «за»
1 запуск
2
подписчиков
Лучшими альтернативами Beautiful CSS Buttons от CSS Scan являются CSS Scan, MagicPattern и CSSBattle.
Если эти 3 варианта вам не подходят, мы перечислили еще несколько вариантов ниже.
Что вы думаете о красивых кнопках CSS с помощью сканирования CSS?
Лучшие альтернативы красивым кнопкам CSS от CSS Scan
Hotjar AI для опросов
РекламныйПоздоровайтесь с вашим новым помощником по опросам
1. Сканирование CSS
140 отзывов38 альтернатив
Узнать большеПрощай, «Проверить элемент» — Визуализируйте CSS любого элемента, на который вы наводите курсор, мгновенно и копируйте все его правила одним щелчком мыши.
2. MagicPattern
62 отзыва32 варианта
ПодробнееСоздавайте уникальную графику для постов в социальных сетях, целевых страниц и брендинга в несколько кликов. Затем экспортируйте их как изображения или даже код (SVG и CSS).
Большое спасибо, чувак.
Вы только что помогли этому ученику.3. CSSBattle. Здесь игроки со всего мира пытаются визуально воспроизвести «Targets» с помощью наименьшего возможного кода CSS и сражаются, чтобы добраться до вершины лидера…
4. Генератор кнопок
23 отзыва12 вариантов
Узнать большеБолее 100 кнопок, которые вы можете использовать в своем проекте. Скопируйте CSS, нажав на кнопку.
5. Mixfont
6 вариантов
Узнать большеСовременный генератор шрифтов
6. 100 кнопок CSS
5 отзывов10 вариантов
Узнать большеОт регистрации к продажам , цифровые действия были бы невозможны без кнопок. Они лежат в основе взаимодействия человека с компьютером. С этим пакетом дайте вашему веб-сайту новый глоток свежего воздуха, как никогда.
..Очень полезно для получения фрагментов более сложных кнопок и их настройки, а не для создания их с нуля.
7. CSS Blocks от Linkedin
3 варианта
Узнать большеCSS Blocks — это эргономичная компонентно-ориентированная система разработки CSS, которая компилируется в высокопроизводительные таблицы стилей. Сочетая продуманную авторскую систему, анализ времени сборки и переписывание шаблонов,…
8. Красивые CSS-флажки с помощью CSS Scan
6 вариантов
Узнать большеКрасивые флажки CSS от CSS Scan — это коллекция из 65 бесплатных красивых флажков CSS, готовых к использованию в ваших следующих проектах. Нажмите, чтобы скопировать его.
9. Stylify CSS
1 обзор5 вариантов
Узнать большеStylify позволяет создавать селекторы, подобные CSS, для создания полезного CSS.
Это как писать чистый CSS прямо в разметке. Он позволяет вам определять компоненты, переменные, макросы, пользовательские селекторы и …Мне нравится, как Stylify сжимает служебные классы. Хорошая альтернатива CSS попутного ветра
Вы только что помогли этому ученику.
..
Это как писать чистый CSS прямо в разметке. Он позволяет вам определять компоненты, переменные, макросы, пользовательские селекторы и …10 крутых кнопок CSS, которые можно использовать бесплатно
Если вы ищете крутые кнопки CSS, вы обратились по адресу. Эти 50 бесплатных кнопок помогут вам создать собственную кнопку, которая идеально подойдет вашему бренду и веб-сайту.
Статьи по теме- Кнопка-переключатель CSS
-
- Лучший флажок CSS
См. перо Кнопка оплаты от Аарона Икера (@aaroniker) на КодПене.
Название:- Кнопка оплаты
Автор:- Аарон Икер
Сделано с:- HTML CSS JAVASCRIPT
См.
перо
Кнопка «Пожертвовать монеткой» от Cooper Goeke (@coopergoeke)
на КодПене.
Заголовок: — Кнопка пожертвования подбрасывания монеты
Автор: — Cooper Goeke
Сделано с помощью: — HTML CSS JAVASCRIPT
Автор:- Giana
Сделано с помощью:- HTML CSS
См. перо Кнопки Cyberpunk 2077 на чистом CSS 😎 от Jhey (@jh4y) на КодПене.
Заголовок: — Кнопки Pure CSS Cyberpunk 2077 ??Автор: — Jhey
Сделано с: — HTML CSS
См.
Автор:-Ахмад Эмран
Сделано с:-HTML,CSS,JS
См. перо Анимация границы при наведении кнопки от Шона Фри (@seanfree) на КодПене.
Заголовок: Анимация границы при наведении курсора на кнопкуАвтор: Шон Фри
Сделано с помощью: HTML, CSS, JS
См. перо Креативное наведение на кнопку от G Rohit (@grohit) на КодПене.
Название:-Creative Button HoverАвтор:-G Rohit
Сделано с:-HTML,CSS,JS
См.
перо
Кнопка — эффект наведения Сони Стридер (@sonjastrieder)
на КодПене.
Автор:-Соня Стридер
Сделано с помощью:-HTML,CSS,JS
См. перо Lettering.js Button Hover States от Райана Маллигана (@hexagoncircle) на КодПене.
Название:-Lettering.js Button Hover StatesАвтор:-Райан Маллиган
Сделано с:-HTML,CSS,JS
См. перо Добавлена анимация при наведении на кнопку от Aaron Iker (@aaroniker) на КодПене.
Заголовок: — Добавить анимацию наведения на кнопкуАвтор:-арон Икер
Сделано с помощью:-HTML,CSS,JS
См.
перо
Эффект липкой кнопки при наведении с фильтрами SVG и CSS от Ines Montani (@ines)
на КодПене.
Автор: — Инес Монтани
Сделано с: -HTML, CSS, JS
См. перо Эффект наведения кнопки от Comehope (@comehope) на КодПене.
Название:-Эффект наведения на кнопкуАвтор:-Comehope
Сделано с:-HTML,CSS,JS
См. перо Стили наведения кнопок от Галена Стрейзена (@galefacekillah) на КодПене.
Название:-Стили наведения кнопокАвтор:-Galen Strasen
Сделано с:-HTML,CSS,JS
См.
перо
UI Button Hover Effect #2 от Daniel Gonzalez (@dan10gc)
на КодПене.
Автор: Дэниел Гонсалес
Сделано с помощью: HTML, CSS, JS
См. перо
Игривые эффекты наведения на кнопку от Аарона Икера (@aaroniker)
на КодПене.
9
Автор: Аарон Икер
См. перо
Эффект наведения кнопки от Comehope (@comehope)
на КодПене.
Автор:-Comehope
Сделано с:-HTML,CSS,JS
См. перо Анимация наведения кнопки от Данила Гончаренко (@Danil89) на КодПене.
Название:-Анимация наведения на кнопкуАвтор:-Данил Гончаренко
Сделано на:-HTML,CSS,JS
См.
перо
Эффект наведения на кнопку от Daniel Gonzalez (@dan10gc)
на КодПене.
Автор: — Даниэль Гонсалес
Сделано с: — HTML, CSS, JS
См. перо 20 эффектов наведения на кнопку от Розы (@RRoberts) на КодПене.
Название: -20 Эффекты наведения на кнопкуАвтор:-Роза
Сделано с:-HTML,CSS,JS
См. перо Эффекты при наведении кнопки Css — вставка box-shadow от Jesús Gracia (@JesGraPa) на КодПене.
Заголовок:-Css эффекты наведения на кнопку – вставка box-shadowАвтор:-Jesús Gracia
Сделано с:-HTML,CSS,JS
См.
перо
Эффект наведения кнопки меню от Питера Кэмерона (@pcameron)
на КодПене.
Автор: -Peter Cameron
Сделано с: -HTML, CSS, JS
Название:-Мой длинный список простого эффекта Hover
Автор: -карта
2. -HTML, CSS, JS
См. перо Кнопка Hover Draw — только CSS от Люка Мейрика (@lukemeyrick) на КодПене.
Название:- Button Hover Draw – только CSSАвтор:-Luke Meyrick
Сделано с:-HTML,CSS,JS
См. перо Эффекты при наведении кнопки преобразования CSS от Les (@lesbaa) на КодПене.
Название: — Эффекты наведения кнопки CSS преобразованияАвтор: -Les
Сделано с: -HTML, CSS, JS
См.
перо
Коллекция крутых эффектов при наведении на кнопку от Carlos Ortega (@Carlos1162)
на КодПене.
Автор:-Карлос Ортега
Сделано с помощью:-HTML,CSS,JS
См. перо Эффекты при наведении кнопки от Wisnu ST (@wisnust10) на КодПене.
Название: — Эффекты наведения на кнопкуАвтор: — Wisnu ST
Сделано с: — HTML, CSS, JS
См. перо Плоская и блестящая кнопка (эффект наведения) от Нейта Уотсона (@nw) на КодПене.
Название:-Плоская и блестящая кнопка (эффект наведения)Автор:-Нейт Уотсон
Сделано с:-HTML,CSS,JS
См.
перо
Эффект наведения на кнопку от badurski (@badurski)
на КодПене.
Автор:-badurski
Сделано с:-HTML,CSS,JS
См. перо Эффекты наведения кнопки «Линия» от Кайла Брамма (@kjbrum) на КодПене.
Название: — Эффекты наведения на кнопку линииАвтор: — Кайл Брамм
Сделано с: — HTML, CSS, JS
См. перо Пуговицы Элицы Димитровой (@elitsa_dimitrova) на КодПене.
Это десять кнопок с эффектами наведения CSS. Для эффектов используются переходы, текстовые тени, анимации и трансформации.
Название:- КнопкиАвтор:-Елица Димитрова
Сделано на:-HTML,CSS,JS
См.
перо
Кнопка с простым эффектом при наведении! Винсент Дюран (@onediv)
на КодПене.
Кнопка с простым эффектом при наведении! Требуется один элемент
Название:- Кнопка с простым эффектом при наведении!Автор:-Винсент Дюран
Сделано с:-HTML,CSS,JS
См. перо Материал Button Hover от Майкла Труонга (@YikesItsMikes) на КодПене.
Название: — Material Button HoverАвтор: — Michael Truong
Сделано с помощью: — HTML, CSS, JS
См. перо CSS-Mask Button Hover Animation (Experimental) от Yugam (@pizza3) на КодПене.
Название: CSS-Mask Button Hover Animation (Experimental)Автор: Yugam
Сделано с помощью: HTML, CSS, JS
См.
перо
Кнопка твиттера для скрытой двери Тима Холмана (@tholman)
на КодПене.
Автор:-Тим Холман
Сделано с:-HTML,CSS,JS
См. перо Эффект сияния пуговиц от Дэна Менсингера (@dmensinger) на КодПене.
Кнопка с эффектом блеска при наведении.
Название: Эффект сияния кнопокАвтор: Дэн Менсингер
Сделано с помощью: HTML, CSS, JS
См. перо Эффекты наведения на кнопку от Аарона Икера (@aaroniker) на КодПене.
Название: — Эффекты при наведении на кнопкуАвтор: — Аарон Икер
Сделано с: — HTML, CSS, JS
См.
перо
Простое наведение на кнопку от magnificode (@magnificode)
на КодПене.
Автор:-magnificode
Сделано с:-HTML,CSS,JS
См. перо Анимация при наведении кнопки от Бхаутика Бхарадавы (@bhautikbharadava) на КодПене.
Название: — Анимация при наведении кнопкиАвтор: — Бхаутик Бхарадава
Сделано с:-HTML, CSS, JS
См. перо Анимация при наведении кнопки Криса Ота (@chrisota) на КодПене.
Название: — Анимация при наведении на кнопкуАвтор: — Крис Ота
Сделано с: — HTML, CSS, JS
См.
перо
Анимация при наведении кнопки от Акшая Наира (@phenax)
на КодПене.
Автор: — Акшай Наир
Сделано с: — HTML, CSS, JS
См. перо Эффекты CSS3 при наведении на кнопку с помощью FontAwesome от foxeisen (@foxeisen) на КодПене.
Заголовок: — Эффекты при наведении кнопки CSS3 с FontAwesomeАвтор: -foxeisen
Сделано с: -HTML, CSS, JS
См. перо Эффекты при наведении на кнопку от Ричи Джейкобса (@ritchiejacobs) на КодПене.
Название: — Эффекты наведения на кнопкуАвтор: — Ричи Джейкобс
Сделано с: — HTML, CSS, JS
См.
перо
Кнопка Hover от Кэтрин Като (@kathykato)
на КодПене.
Автор:-Katherine Kato
Сделано с:-HTML,CSS,JS
См. перо Hover.css от Яна Ланна (@IanLunn) на КодПене.
Название: Hover.cssАвтор: Ян Ланн
Сделано с помощью: HTML, CSS, JS
См. перо Анимированные кнопки CSS3 от Sazzad (@sazzad) на КодПене.
Название:- Анимированные кнопки CSS3Автор:-Sazzad
Сделано с:-HTML,CSS,JS
См. перо
Простые стили кнопок от Саймона Басборга (@simonbusborg)
на КодПене.
Автор:-Саймон Басборг
Сделано с:-HTML,CSS,JS
См. перо Bubbly Button от Нура Сауда (@nourabusoud) на КодПене.
Название:- Пузырьковая кнопкаАвтор:-Нур Сауд
Сделано с:-HTML,CSS,JS
См. перо Эффект пузыря кнопки от Adrien Grsmto (@Grsmto) на КодПене.
Заголовок: CodePen HomeАвтор: Кнопка с пузырьковым эффектом
Сделано с помощью: HTML, CSS, JS
См. перо
Концепция кнопки Twitter от Эрика Дейнера, автор Bennett Feely (@bennettfeely)
на КодПене.
Автор:-Беннет Фили
Сделано с:-HTML,CSS,JS
См. перо Эффекты наведения на кнопку с box-shadow от Giana (@giana) на КодПене.
Название: — Эффекты наведения на кнопку с тенью окнаАвтор: — Джана
Сделано с: — HTML, CSS, JS
См. перо Button Hover States от Джеймса Пауэра (@thejamespower) на КодПене.
Заголовок: — Состояние наведения на кнопкуАвтор: — Джеймс Пауэр
Сделано с помощью: — HTML, CSS, JS
См.
перо
Переходы CSS Border от Giana (@giana)
на КодПене.
Автор: — Джиана
Сделано с: — HTML, CSS, JS
См. перо Эффекты наведения на кнопку от Кайла Брамма (@kjbrum) на КодПене.
Название: — Эффекты при наведении на кнопкуАвтор: -Кайл Брамм
Сделано с помощью: -HTML,CSS,JS
См. перо Коллекция эффектов наведения на кнопку от Дэвида Коннера (@davidicus) на КодПене.
Название: Коллекция эффектов при наведении на кнопкуАвтор: Дэвид Коннер
Сделано с помощью: HTML, CSS, JS
См.
перо
Кнопка CSS с пузырьками от Giana (@giana)
на КодПене.
Автор:-Джиана
Сделано с:-HTML,CSS,JS
См. перо Простой эффект наведения кнопки CSS от Андреаса Лундгрена (@adevade) на КодПене.
Название: — Простой эффект наведения на кнопку CSSАвтор: — Андреас Лундгрен
Сделано с: — HTML, CSS, JS
См. перо Кнопка слива от Камила (@KamilDyrek) на КодПене.
Название:- Кнопка смываАвтор:-Камиль
Сделано с:-HTML,CSS,JS
См.
перо
Кнопка меню для гамбургера — стиль и анимация с использованием чистого CSS от Yinxi Chen (@kaylolo)
на КодПене.
Автор:-Yinxi Chen
Сделано с:-HTML,CSS,JS
См. перо Шесть чистых CSS-анимаций при наведении на кнопку от Кристиана (@CTNieves) на КодПене.
Название: Шесть анимаций при наведении курсора на кнопку на чистом CSSАвтор: Кристиан
Сделано с помощью: HTML, CSS, JS
См. перо CSS Fizzy Button от Джейми Коултера (@jcoulterdesign) на КодПене.
Название: CSS Fizzy ButtonАвтор: Джейми Коултер
Сделано с помощью: HTML, CSS, JS
См.
перо
CSS BUTTON HOVER от Имрана Пардеса (@ImranPardes)
на КодПене.
Автор:-Имран Пардес
Сделано с:-HTML,CSS,JS
См. перо Кнопочный переключатель на чистом CSS от Hugo Giraudel (@HugoGiraudel) на КодПене.
Название:- Кнопочный переключатель на чистом CSSАвтор:-Hugo Giraudel
Сделано с:-HTML,CSS,JS
См. перо Кнопка отмены регистрации от Toshiyuki TAKAHASHI (@gau) на КодПене.
Название:- Кнопка отключения регистрацииАвтор:-Тошиюки ТАКАХАСИ
Сделано с:-HTML,CSS,JS
См.