Нужны кнопки для сайта? 50 примеров CSS3 кнопок с эффектами и анимацией

Ищете стильные и оригинальные кнопки для вашего сайта? В статье собраны 50 примеров кнопок с эффектами и анимациями, которые легко применить с помощью CSS3. Эти элементы интерфейса помогут сделать ваш дизайн более привлекательным и современным.

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

Обновлено: 2025-06-29 15:51:55 МЛ Мария Логутенкоавтор материала

Генератор кнопок CSS3

Посмотрите на генератор CSS3 кнопок от Sanwebe:

Розовая кнопка CSS3 со шрифтом Pacifico

Симпатичная розовая кнопка (не считая небольшого кода jQuery для проигрывания музыки и изменения внутреннего текста) полностью создана на основе CSS3:

Коллекция 3D кнопок

Коллекция 3D кнопок, созданная с помощью CSS3:

Социальные 3D кнопки

Отличные социальные кнопки, выполненные с помощью CSS3 и шрифта для иконок:

Анимированные CSS3 кнопки

Анимированные CSS кнопки с фоновыми узорами. Могут не работать в браузерах Firefox 3.6 и IE10:

Круглые анимированные кнопки CSS3

Еще одни анимированные кнопки, в которых поворот текста при наведении мыши дает по-настоящему привлекательный эффект:

Кнопки Clean Circle

Вот еще один пример круглых кнопок CSS3:

Кнопки-переключатели на CSS3

Хорошо выполненные переключатели, созданные с помощью CSS3 и шрифта иконок:

Анимированная кнопка CSS3

Симпатичная трехмерная кнопка, созданная с помощью CSS3 и шрифтов Google:

Эффекты кнопок CSS3

Эти кнопки демонстрируют анимации, использующие различные свойства CSS3:

Глянцевые кнопки CSS3

Теперь можно быть абсолютно уверенным, что глянцевые кнопки можно легко создать при помощи CSS3, больше никакого Photoshop:

Трехмерные кнопки CSS3

Удивительно, что можно сделать с помощью псевдоэлементов CSS3 :before и :after. Оцените поразительные трехмерные кнопки:

Переключатель CSS3

Пример кнопки-переключателя на CSS3 без использования JavaScript:

Эффект трехмерной переворачивающейся кнопки

Эффект трехмерной переворачивающейся при нажатии кнопки, созданной с помощью CSS3:

Брендовые кнопки

Красивые кнопки CSS популярных брендов, использующих иконки bootstrap:

Темная круглая кнопка

Круглая кнопка с использованием jQuery для придания эффекта капли при нажатии на кнопку:

Переключатель CSS3

Переключатель, созданный с помощью CSS3:

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

Коллекция плоских кнопок CSS на все случаи жизни, без анимации и эффектов:

Кнопки общего доступа в социальных сетях

Более привлекательная версия кнопок общего доступа, но без функционала. По версии разработчика, должны работать в IE7+:

Рождественская кнопка

Рождественская CSS кнопка, использующая data:urls – метод для встраивания изображения прямо в документ:

Мягкая кнопка

Круглая глянцевая кнопка, созданная с помощью CSS3:

Мягкая кнопка Soft Button

Кнопки используют только символы Unicode, что позволяет использовать текстовые или иконочные шрифты:

Крупные трехмерные анимированные кнопки CSS3

Еще один набор трехмерных анимированных CSS кнопок для сайтов. Анимация выполнена с помощью свойств animation и keyframes:

Металлические CSS3 кнопки

Коллекция металлических CSS3 кнопок, символы на которых были созданы с помощью шрифта pictos с использованием @font-face. Для металлического эффекта были задействованы свойства box-shadow и linear-gradient:

Круглые CSS3 кнопки

Еще одна коллекция круглых анимированных кнопок на CSS3:

CSS3 кнопки социальных сетей с возможностью нажатия

Кнопки используют простые CSS3 свойства, такие как gradients, box-shadows, text-shadows и так далее. Состояние «ожидание» и «активное» также включены в этот набор:

Простые CSS3 кнопки

Красивые кнопки CSS:

Трехмерная кнопка загрузки

Эта трехмерная кнопка использует трансформацию perspective. Она работает только в браузерах на основе webkit:

Поразительные CSS3 кнопки социальных сетей

Эти кнопки социальных сетей используют как базовый фон свойства liner-gradient, box-shadow для трехмерного эффекта:

Большая кнопка

Солидная глянцевая CSS3 кнопка с эффектом тени внизу. Для кнопки используется шрифт под названием Sansita One из коллекции Google:

Простые кнопки

Несколько простых CSS кнопок:

CSS3-кнопки социальных сетей

Еще один набор кнопок социальных сетей. Для создания самих кнопок используются псевдоэлементы :before и :after:

Простые CSS кнопки

Набор незамысловатых CSS кнопок. Они просты в настройке и использовании. Их можно легко интегрировать с Font-Awesome или другой библиотекой:

Кнопки в виде покерной фишки

Пример простой кнопки в виде фишки для игры в покер. Она может быть также использована как кнопка с эффектом наведения:

Кнопка-ползунок

Концепт CSS кнопки-ползунка:

Кнопки меню администратора

Панель администратора (меню или навигация) с использованием CSS3 и фреймворка fontawesome. При переключении на кнопку класс active добавляется с помощью jQuery:

Пришитая кнопка

Простая кнопка со строчкой, демонстрирующая возможности CSS3 без использования фонового изображения:

Вращающаяся кнопка

Круглая кнопка с вращающейся границей для индикации наведения курсора мыши:

Кнопка на CSS3

Мягкая кнопка, созданная с помощью CSS3 на основе этого примера:

CSS3 кнопка с выдвигающейся карточкой

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

Анимация CSS3 кнопки в виде конфеты

Кнопка с анимацией для отображения состояния загрузки:

CSS3 переключатели

Красивые переключатели, которые используют jQuery для переключения класса:

Глянцевые кнопки

Набор красивых кнопок для сайта CSS. Используются различные свойства для придания трехмерного глянцевого вида:

Трехмерные кнопки с разноцветной границей

Кнопки с границами разных цветов:

8-битный эффект при наведении

Обратите внимание на эти великолепные кнопки с эффектом 8 бит, срабатывающем при наведении курсора:

Кнопки Салливан

Простые кнопки, использующие иконки из FontAwesome:

Чувственные SCSS кнопки в цветовой модели HSB

Несколько CSS кнопок с иконками из FontAwesome:

Набор кнопок

Очередной набор чистых кнопок для веб-приложений:

Кнопка-переключатель

Кнопка-переключатель на основе Bootstrap:

Анимированные кнопки

Коллекция анимированных CSS3 кнопок для придания особого колорита вашему сайту:

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

Коллекция CSS кнопок различных цветов:

МЛ Мария Логутенкоавтор-переводчик статьи «50 CSS3 button examples with effects & animations»