50 примеров CSS3 кнопок с эффектами и анимацией

Я отобрал некоторые кнопки CSS, которые, на мой взгляд, могут быть использованы в веб-проектах.

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

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

css3-btn-gen

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

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

css3-btn-1

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

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

css3-btn-2

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

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

css3-btn-3

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

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

css3-btn-4

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

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

css3-btn-5

Кнопки Clean Circle

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

css3-btn-6

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

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

css3-btn-7

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

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

css3-btn-8

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

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

css3-btn-9

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

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

css3-btn-10

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

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

css3-btn-11

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

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

css3-btn-12

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

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

css3-btn-13

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

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

css3-btn-14

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

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

css3-btn-15

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

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

css3-btn-16

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

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

css3-btn-17

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

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

css3-btn-18

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

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

css3-btn-19

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

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

css3-btn-20

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

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

css3-btn-21

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

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

css3-btn-22

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

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

css3-btn-23

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

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

css3-btn-24

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

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

css3-btn-25

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

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

css3-btn-26

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

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

css3-btn-27

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

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

css3-btn-28

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

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

css3-btn-29

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

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

css3-btn-30

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

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

css3-btn-31

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

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

css3-btn-32

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

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

css3-btn-33

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

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

css3-btn-34

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

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

css3-btn-35

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

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

css3-btn-36

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

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

css3-btn-37

Кнопка на CSS3

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

css3-btn-38

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

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

css3-btn-39

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

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

css3-btn-40

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

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

css3-btn-41

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

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

css3-btn-42

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

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

css3-btn-43

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

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

css3-btn-44

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

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

css3-btn-45

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

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

css3-btn-46

Набор кнопок

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

css3-btn-47

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

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

css3-btn-48

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

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

css3-btn-49

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

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

css3-btn-50

Перевод статьи «50 CSS3 button examples with effects & animations» был подготовлен дружной командой проекта Сайтостроение от А до Я.