Java, UX, HTML, CSS, WEB-design

10 фрагментов кода для создания красивых кнопок CSS

[ad_1]

Веб-дизайнерам больше не нужно полагаться на Photoshop для создания потрясающих кнопок. С помощью CSS3 вы можете манипулировать всем: от фоновых градиентов до теней и глянцевых/блестящих эффектов. Мы собрали 10 уникальных коллекций и фрагментов CSS-кнопок от CodePen, которые вы можете изучать и свободно использовать в своих веб-проектах.

Более 500 000 шрифтов, стоковых фотографий, тем и элементов дизайна

Неограниченное скачивание всего, начиная с всего $16,50 в месяц!


1. Пластиковые пуговицы

См. Кнопки Pen CSS3 от Benjamin (@ben_jammin) на CodePen.dark

Этот набор кнопок чист и точен. Вы можете легко переделать любую из этих кнопок, поскольку они бывают разных цветов и размеров.

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

2. Классные кнопки

См. Pen Cool Buttons от Фелипе Маркоса (@FelipeMarcos) на CodePen.dark

Эти крутые пуговицы, сделанные Фелипе Маркосом, немного отличаются от пластиковых пуговиц выше, но они так же просты в использовании. У них нет блестящего пластикового дизайна, но они все еще имеют эффект «толкания» при нажатии.

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

3. Кнопки Google

См. кнопки Pen Google от Тима Вагнера (@timwagner) на CodePen.dark

Онлайн-инструменты Google, такие как Blogger, Drive, Gmail и их функция поиска, имеют разные стили кнопок. И разработчик Тим Вагнер клонировал эти стили в этой ручке.

Они были полностью созданы на CSS3, и эти кнопки демонстрируют множество эффектов, вдохновленных Google, которые вы можете создать, и все они выглядят фантастически. Есть аналогичный пример, созданный Monkey Raptor, который расширяет эти кнопки, добавляя в микс несколько других.

4. Пучок пуговиц

См. Pen EwDar Алана Коллинза (@AlanCollins) на CodePen.dark

Еще один набор глянцевых кнопок в пластиковом стиле можно найти в этой ручке, созданной Аланом Коллинзом. Он поддерживает несколько цветов и имеет разные стили для маленьких, средних и больших кнопок.

Что делает этот набор уникальным, так это то, что вы можете переключаться между глянцевым стилем и плоским стилем с помощью одного класса. Большинство кнопок имеют один «стиль», но вы можете включить или отключить глянцевый дизайн с помощью одного класса CSS — удобно!

5. Социальные кнопки

См. социальные кнопки и значки Pen CSS от Стэна Уильямса (@Stanssongs) на CodePen.dark.

Этот фрагмент, возможно, в полная коллекция социальных кнопок с уникальными цветовыми схемами и фирменными значками.

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

По-прежнему забавный набор кнопок только для CSS, который можно использовать, если вам нужен социальный обмен на вашем веб-сайте.

6. Желейная анимация

См. кнопку Pen Jelly от ayamflow (@ayamflow) на CodePen.dark

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

Помимо невероятно интересной анимации, меня также впечатлила полуреалистичная тень кнопки внизу. Он анимируется вместе с кнопкой, что делает его идеальным призывом к действию для любого стартап-сайта или социальной сети.

7. Кнопка параллакса

См. 3D-кнопку Pen Parallax с переменными CSS, управляемыми JS, от Тобиаса Райха (@electerious) на CodePen.dark.

Тобиас Райх создал эту прекрасную кнопку параллакса, используя радиальные градиенты CSS3 и довольно причудливые цвета.

Сама по себе кнопка CSS3 впечатляет. Весь фон и тень создаются исключительно с помощью CSS. Но с небольшим количеством JavaScript Тобиас смог добавить искажение параллакса при наведении и щелчке.

Это один из наиболее продвинутых эффектов кнопок, которые я когда-либо видел, и он прекрасно сочетается с любой веб-страницей.

8. Таблетки Hubspot

См. кнопки-вставки Pen Hubspot Red Pill — Blue Pill от Joe Henriod (@joehenriod) на CodePen.dark

Разработчик Джо Хенриод создал эти кнопки на основе дизайна Hubspot. Они функционируют так же, как традиционные HTML-кнопки, но созданы с использованием классов CSS, которые можно применять к любому элементу.

В этом наборе используются красные и синие кнопки-таблетки, отсылающие к «Матрице», но вы можете изменить цвета на все, что захотите. А состояния наведения и щелчка достаточно яркие, чтобы привлечь чье-то внимание.

9. Сексуальные кнопки SCSS

См. кнопки Pen Sexy SCSS в HSB Джереми Томаса (@jgthms) на CodePen.dark

Большинство фронтенд-кодеров используют Sass/SCSS, потому что он предлагает больше контроля и его гораздо проще писать, чем традиционный CSS. Эти кнопки SCSS рассчитаны на длительный срок службы и впечатляюще детализированы с внутренними и внешними эффектами тени.

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

Эти кнопки должно быть легко реализовать на любом веб-сайте, и вы даже можете преобразовать SCSS в CSS прямо из CodePen.

10. Кнопки в стиле Mozilla

См. «Кнопки Mozilla с одним элементом пера» Феликса Шварцера (@slimsmearlapp) на CodePen.dark

Веб-сайт Mozilla подвергся серьезному ребрендингу, в результате которого отказались от традиционных пластиковых кнопок. Мне понравился их оригинальный дизайн, и, к счастью, он сохранился благодаря этому фрагменту, сделанному Феликсом Шварцером.

Форма синего треугольника на самом деле создана с помощью чистого CSS вместе с фоновым градиентом и эффектом 3D-скоса. Эти кнопки сильно стилизованы и настолько хорошо продуманы, что обязательно привлекут внимание.

Дополнительные ресурсы

Все эти 10 кнопок уникальны и легко настраиваются для любого макета. Поскольку они разработаны исключительно с помощью CSS3, вы можете изменить их размер, цвет и стили, чтобы они вписывались в проекты для бизнеса, блогов, социальных сетей или магазинов электронной коммерции.

Но сократить этот список до 10 было сложно, учитывая все невероятные фрагменты. Если вы ищете больше, вы можете просмотреть CodePen, чтобы увидеть еще больше чистых кнопок CSS.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 фрагментов кода для создания красивых кнопок CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 фрагментов кода для создания красивых кнопок CSS

Название: 10 фрагментов кода для создания красивых кнопок CSS . Краткое описание: [ad_1] ⭐ Веб-дизайнерам больше не нужно полагаться . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»