Java, UX, HTML, CSS, WEB-design

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

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

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

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

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

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

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


Практически каждый сайт использует кнопки. Их можно использовать для CTA, основных кнопок контактной формы или чего-то еще.

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

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

Красочные стили кнопок

См. Кнопки-призраки пера с CSS3 от Mithicher (@mithicher) на CodePen.

Разработчик Митичер Баро создал эти удивительные кнопки-призраки нескольких разных цветов и размеров. Все эти свойства контролируются с помощью CSS, что упрощает их настройку.

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

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

Кнопки-призраки со значком

См. Кнопки-призраки со значком пера Николаса (@BoiseDigital) на CodePen.

Иногда вам могут понадобиться значки на кнопках-призраках. Когда текста недостаточно, тогда вам понадобится что-то вроде этого.

Каждая кнопка использует один и тот же значок из набора IcoMoon, но вы можете легко заменить его на что угодно. Существует довольно много бесплатных иконочных шрифтов, и они феноменальны.

А с иконочными шрифтами вам никогда не придется беспокоиться об обрезке или изменении размера изображений. Вы просто меняете класс значка в своем HTML и вуаля! Ваш новый значок готов к работе.

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

Необычные цвета

См. Pen Fancy Button Саймона Гоэллнера (@simeydotme) на CodePen.

Разработчик Саймон Гёлльнер сделал большой шаг вперед, представив этот набор причудливых дизайнов кнопок.

Все они используют пользовательские стили градиента с кодом Sass для управления границами. Даже типографика окрашена градиентами!

При наведении вы найдете несколько красивых эффектов кнопок с внешним свечением. Это отклоняется от «нормы» заполнения кнопок-призраков фоновыми цветами. Это уникальный поворот в типичной формуле кнопки-призрака и долгожданное дополнение к этому списку.

Яркая анимация

См. анимацию кнопки-призрака пера — Dribbble by Valentine (@wintr) на CodePen.

Я еще не видел анимацию наведения CSS, которая не оставила бы меня впечатленным. Теперь у этих кнопок не самая причудливая анимация в мире, но они определенно привлекают ваше внимание.

Идея на самом деле исходит из этого снимка на Dribbble, созданного дизайнером Николой Поповичем. С помощью этого пера вы получите очень похожий внешний вид и ощущения от оригинальной анимации, но с использованием настраиваемых изменений фона и эффектов наведения.

Это действительно красивый стиль и одна из лучших анимированных кнопок-призраков.

Кнопки-призраки с градиентом

См. Кнопки-призраки Pen Gradient от Alex (@akwright) на CodePen.

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

Из этих наборов кнопок вы найдете 3 различных варианта градиента:

  • Градиент тени коробки
  • Градиенты границ
  • Пограничные изображения (скучно!)

Естественно, изображения являются самыми безопасными, поскольку они, как правило, лучше всего совместимы с устаревшими браузерами.

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

Кнопка Хэллоуина

См. кнопку Pen Halloween Ghost от Робина (@lessthanthree) на CodePen.

С этой праздничной кнопкой Хэллоуина мы действительно чувствуем вкус слова «призрак» в кнопке-призраке.

Он не использует никаких спецэффектов, кроме теней при наведении курсора и анимации светового сияния. Но самое классное в этой кнопке то, что она на самом деле выглядит как призрак. За все эти годы разработки и изучения веб-сайтов я ни разу не видел кнопки-призрака, смоделированной по образцу призрака. Иди разберись!

Это чертовски крутой CSS-проект, который станет хорошей отправной точкой для ваших собственных кнопок.

Отзывчивая кнопка-призрак

См. кнопку Ghost Responsive Pen от Jae Aquino (@jaevernonaquino) на CodePen.

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

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

Пастельные градиенты

См. кнопку Pen Gradient Ghost от CJ Williams (@silencekillsdesign) на CodePen.

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

Вместо этого разработчик CJ Williams создал эти кнопки с более подробными фоновыми градиентами и прозрачными границами. Таким образом, кнопки могут использовать свои внутренние отступы, чтобы скрыть фон за основным текстом, но при этом сохранить видимость границ.

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

Кнопка цифрового воспроизведения

См. тест кнопки Pen Ghost от Joss (@mmmkr) на CodePen.

Вот действительно уникальный дизайн — и это одна из двух демонстраций, использующих JavaScript. Эта играбельная кнопка-призрак использует CSS для стиля и JS для интерактивности.

Если вы нажмете кнопку, вы сможете запустить/приостановить звук проигрывателя, но только после того, как он появится в поле зрения. Это еще одна важная причина использования JavaScript.

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

Анимация заливки кнопок

См. анимацию заполнения кнопки пера Дэвида Стаббса (@davekilljoy) на CodePen.

Хотите добавить классные эффекты при наведении курсора на кнопки-призраки? Посмотрите не дальше различных анимаций заливки Дэвида Стаббса.

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

Я абсолютно рекомендую этот пакет всем разработчикам, которые хотят красивое разнообразие кнопок-призраков.

Кнопки-призраки из материала

См. «Кнопки-призраки Pen Material Design» Марко Фугаро (@marco_fugaro) на CodePen.

Вы можете создавать удивительные вещи с помощью стилей материального дизайна Google. Некоторые из моих любимых функций — это UX-взаимодействия и микровзаимодействия, изначально разработанные для телефонов Android.

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

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

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


Source: 1stwebdisigner

Заключение

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

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

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

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

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

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