Кнопки для сайта

скачать красивые кнопки для сайта

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

Пользуйтесь на здоровье.

Добавляйте в закладки.

Красивые готовые HTML+CSS кнопки для сайта

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

css animated buttons

Демо
Подробнее

«Бизнес ПРО» кнопки и элементы на CSS3

blogwork-buttons-2
Демо
Подробнее

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

blogwork-buttons-3
Демо
Подробнее

Простые 3Д кнопки-метки

blogwork-buttons-4
Демо
Скачать
Подробнее

HTML CSS Кнопки

blogwork-buttons-5
Скачать

Светящиеся кнопки

blogwork-buttons-6
Демо
Скачать
Подробнее

Облако тегов с CSS-подсветкой

blogwork-buttons-7
Демо
Скачать
Подробнее

Круглые социальные кнопки

blogwork-buttons-8
Демо
Скачать
Подробнее

CSS — кнопки социальных сетей

blogwork-buttons-9
Демо
Скачать
Инструкция

Милые CSS кнопки

blogwork-buttons-10
Демо
Скачать
Подробнее

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

blogwork-buttons-11
Демо
Скачать
Подробнее

3Д кнопки социальных медиа

blogwork-buttons-12
Демо
Скачать
Подробнее

Офигенные CSS3 кнопки

blogwork-buttons-13
Демо
Скачать
Подробнее

CSS3 кнопки «Гитхаб»

blogwork-buttons-14
Демо
Скачать

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

blogwork-buttons-15
Демо
Скачать
Документация

Кнопки на CSS3 с псевдо-элементами

blogwork-buttons-16
Демо
Скачать
Документация

3Д веб-кнопки

blogwork-buttons-17
Демо
Скачать
Документация

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

blogwork-buttons-18
Демо
Скачать
Документация

Радио-кнопки с тенью

Интересная попытка прибавить кнопкам в стиле «flat» немного глубины.
blogwork-buttons-19
Скачать

Простые кнопки со стрелами

blogwork-buttons-20
Скачать

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

blogwork-buttons-21
Скачать

Мокап пользовательского интерфейса с кнопками

blogwork-buttons-22
Скачать

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

blogwork-buttons-23
Скачать

Кнопки

blogwork-buttons-24
Скачать

Интересные идеи с необычной стилистикой кнопок

blogwork-buttons-25
Скачать

Кнопки в стиле «Флэт»

blogwork-buttons-26
Скачать

Flat-кнопки

blogwork-buttons-27
Скачать

Больше flat-кнопок на HTML+CSS для пользовательского интерфейса

blogwork-buttons-28
Скачать

Кнопки с интересным hover-эффектом

blogwork-buttons-29
Скачать

Кнопки «как у Гугла»

blogwork-buttons-30
Скачать

Раскрашиваемые кнопки «Добавить в корзину»

blogwork-buttons-31
Скачать

CSS3 кнопки с иконками

blogwork-buttons-32
Скачать

Металлические кнопки для интерфейса

blogwork-buttons-33
Скачать

Стильные кнопки-переключатели

blogwork-buttons-34
Скачать

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

blogwork-buttons-35
Скачать

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

blogwork-buttons-36
Скачать

Радио-баттоны

blogwork-buttons-37
Скачать

Кнопки для выбора и чеклиста

blogwork-buttons-38
Скачать

Интерфейсные кнопки в стиле «флэт»

blogwork-buttons-39
Скачать

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

blogwork-buttons-40
Скачать

Красивые цветные кнопки на CSS для сайта

blogwork-buttons-41
Скачать

Готовые анимированные кнопки на сайт

blogwork-buttons-42
Скачать

Кнопки социальных сетей для сайта

blogwork-buttons-43
Демо
Скачать

Готовые кнопки

blogwork-buttons-44
Скачать

Кнопки в стиле «Герои 2»

blogwork-buttons-45
Скачать

Toggle-кнопки

blogwork-buttons-46
Скачать

Анимированная кнопка «Скачать» для сайта

blogwork-buttons-47
Скачать

Кнопка-компас

blogwork-buttons-48
Скачать

Набор простых и красивых кнопок для сайта

blogwork-buttons-49
Скачать

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

blogwork-buttons-50
Скачать

Кнопки в стиле Стар-трека

blogwork-buttons-51
Скачать

CSS3 «Hexagon» Кнопки

blogwork-buttons-52
Демо
Документания

Как создать кнопки для сайта на CSS+HTML с эффектами и анимацией?

Цветные CSS-кнопки для сайта

Набор из нескольких типов CSS кнопок в разных цветах.
blogwork-button-001
Скачать

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

Коллекция кнопок для украшения сайта.
blogwork-button-002

Скачать

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

Переключатели в стиле Бутрстрапа
blogwork-button-003
Скачать

Набор светлых кнопок

Несколько простых и минималистичных кнопок для вашего интерфейса
blogwork-button-004
Скачать

SCSS кнопки

Используют иконки FontAwesome
blogwork-button-005
Скачать

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

Простые и чистые кнопки сделанные на CSS, Используются иконки из FontAwesome.
blogwork-button-006
Скачать

8-битные кнопки

Оцените эти прекрасные восьмибитные кнопки при наведении.
blogwork-button-007
Скачать

3Д кнопки

blogwork-button-008
Скачать

Стеклянные кнопки

В наборе стеклянных кнопок используются различные CSS-настройки для придания 3Д-вида.
blogwork-button-009
Скачать

CSS3 «Вкл.»/«Выкл.» переключатели

Прикольные переключатели выполненные на HTML и CSS3. Используется немного jQuery.
blogwork-button-010
Скачать

Анимированная полоса загрузки

blogwork-button-011
Скачать

Кнопка с выпадающей карточкой

Эти кнопки выглядят как карточки, выпадающие из кармашков. Используется для того чтобы скрыть информацию до того как пользователь выберет карточку.
blogwork-button-012
Скачать

CSS3 кнопки для сайта

Чистые мягкие кнопки.
blogwork-button-013
Скачать

Кнопки

Круговые кнопки с разделенной окантовкой окружности, чтобы показать индикацию при наведении.
blogwork-button-014
Скачать

Прошитые кнопки для сайта о рукоделии

Кнопки выглядят простроченными и демонстрируют возможности CSS.
blogwork-button-015
Скачать

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

blogwork-button-016
Скачать

Кнопка-переключатель (слайдер) для сайта

blogwork-button-017
Скачать

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

Может также использоваться с различными эффектами при наведении на нее.
blogwork-button-018
Скачать

Простые CSS кнопки для сайта

Набор простых кнопок легко настроить под себя и использовать. Может быть легко интегрирован с Font-Awesome.
blogwork-button-019
Скачать

Социальные кнопки для сайта

blogwork-button-020
Скачать

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

blogwork-button-021
Скачать

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

Большая массивная светящаяся кнопка с эффектом тени.
blogwork-button-022
Скачать

Восхитительные социальные кнопки для сайта на Css3

Используются градиенты и 3д-тень.
blogwork-button-023
Скачать

3Д кнопки «Скачать» для сайта

blogwork-button-024
Скачать

Простые и красивые пуш-кнопки для сайта

blogwork-button-025
Скачать

Социальные кнопки для сайта

В кнопках используется простые настройки CSS — градиенты, тени, изменение цвета при наведении курсора.
blogwork-button-026
Скачать

Готовые скругленные кнопки

Другая коллекция красивых закругленных анимированных кнопок на сайт.
blogwork-button-027
Скачать

Кнопки для сайта с «металлическим» интерфейсом

blogwork-button-028
Скачать

3Д анимированные кнопки

blogwork-button-029
Скачать

Красивые «мягкие» кнопки на сайт

В кнопках используются символы юникода, но вы можете добавить иконки или иконочный шрифт.
blogwork-button-030
Скачать

Готовые красивые кнопки

Круглые, немного светящиеся кнопки на сайт.
blogwork-button-031
Скачать

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

blogwork-button-032
Скачать

Красивые кнопки «поделиться в социальных сетях»

blogwork-button-033
Скачать

Прекрасные плоские кнопки

Коллекция красивых плоских кнопок на любые случаи. Нет анимаций и эффектов.
blogwork-button-034
Скачать

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

blogwork-button-035
Скачать

Темные кнопки-кружки

Используется немного jQuery, чтобы добавить красивый эффект при нажатии.
blogwork-button-036
Скачать

Брендовые кнопки на сайт

Без эффектов или анимаций, просто HTML&CSS кнопки брендов на ваш сайт.
blogwork-button-037
Скачать

3Д-кнопки с эффектом переворота

Используется только CSS3.
blogwork-button-038
Скачать

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

blogwork-button-039
Скачать

3D CSS3 кнопки

blogwork-button-040
Скачать

Подсвечивающиеся кнопки

Отлично! Теперь вы умеете делать кнопки с подсветкой на чистом CSS, без использования фотошопа.
blogwork-button-041
Скачать

CSS3 кнопки с крутыми эффектами

blogwork-button-042
Скачать

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

blogwork-button-043
Скачать

CSS3 toggle-кнопки

blogwork-button-044
Скачать

Красивые минималистичные круглые кнопки на сайт

blogwork-button-045
Скачать

Готовые круглые анимированные кнопки

blogwork-button-046
Скачать

Кнопки с анимацией

blogwork-button-047
Скачать

Социальные кнопки с 3D-эффектом

blogwork-button-048
Скачать

Коллекция красивых 3D-кнопок

blogwork-button-049
Скачать

Красивая розовая кнопка с анимационным эффектом

blogwork-button-050
Скачать

Как самому сгенерировать кнопку для сайта?

Идем на Sanwebe CSS3 button generator. Что там? Генератор кнопок, вот такой:

генератор кнопок

Видим там миллион настроек и пробуем настраивать. Вот что получилось у меня.

сгенерировал кнопку

Говорить тут нечего, это явно шедевр. Попробуйте и вы.

Как самому сделать кнопку для сайта (картинкой)?

Всегда можно позаимствовать чужую кнопку. Сто раз так делал. Например, ни одна HTML-кнопка из списка выше вам не нравится и вы думаете «пойду снова гуглить в Яндексе».

Идете вы на сайт Яндекса, где поисковик предлагает сделать yandex.ru главной страницей. Вот так:

кнопки Яндекса

Вас осеняет — эта божественная желтая кнопка ровно то, что вам нужно. Вот только надпись не та. На кнопке написано «Да», а вам нужно — «Скачать». Не проблема, открываем инспектор Хрома (Ф12) — меняем в коде «Да» на «Скачать».

меняем надпись кнопки

Результат:

сделали кнопку самостоятельно

Отлично! То что нужно. Теперь идем в Фотошоп (или можете воспользоваться другими программами), выделяем кнопку и обрезаем ее по краю. В моей версии на английском языке это действие называется «Кроп»:

обрезка кнопки в фотошопе

Результат:

кнопка Яндекса

Отличная кнопка картинкой, как по мне! И внешний вид интересный.

Ну хорошо, а что на счет HTML-CSS версии этой кнопки? Здесь тоже ничего сложного. Достаточно всего лишь… Скопировать CSS-оформление из инспектора Хрома. Кнопка ниже оформлена при помощи CSS:

html css кнопка

Скачать

Примерно так можно сделать себе кнопку на сайт. Ну а как вставить в html картинку я уже рассказывал. Спасибо за внимание.

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

В этом посте научу вас и покажу, как вставить скрипт крутой формы обратной связи на …

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *