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

Главная » Инструменты »

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

В версии 2.9 добавил возможность настройки стилей при наведении на кнопку.

Текст кнопки: Ссылка кнопки:


Настройка цвета
Настройка Размеров


Цвет текста:
Цвет фона:
Цвет обводки:
Цвет при
наведение:

Цвет текста
при наведение:

Горизонтальные отступы:
Вертикальные отступы:
Закруглённость:
Толщина обводки:
Размер шрифта:

Выравнивание кнопки
По левому краю По центру По правому краю Открытие ссылки на новой вкладке


Результат


Код для установки на сайт
выделить код


Сохраните, чтобы не потерять инструмент

Что такое кнопка?

Кнопка (англ. button) — элемент интерфейса, является метафорой кнопки в технике и, соответственно, изображается схожей с ней и выполняет аналогичные функции. При нажатии на неё происходит программно связанное с этим нажатием действие либо событие.

Основной особенностью является простота настроек кнопок и удобство в редактировании.

Инструкция настройки

При создание данного инструмента, я максимально старался упростить систему настройки кнопки. Для тех, кто не разберётся, что нужно делать объяснения:

  1. Текст кнопки - введите текст, который будет отображаться на кнопке.
  2. Ссылка кнопки - укажите страницу, которая будет открываться при нажатии.
  3. Цвета кнопки - блок настройки цветов. Тут вы сможете настроить цвета кнопки, текста и обводки.
  4. Настройка размеров - данный блок необходим для настройки размеров кнопки и размеров шрифта.
  5. Выравнивание кнопки - тут вы сможете выравнять кнопку по разным сторонам сайта.
  6. Открытие на новой вкладке - добавить возможность открывать по клику новую страницу.
  7. Цвет при наведение - настройка позволяет сделать эффект при наведении мыши на кнопку.
  8. Цвет текста при наведение - позволяет изменить цвет текста при наведении.

После выполнения всех необходимых настроек, нажмите на кнопку «Выделить код» и нажмите комбинацию клавиш CTRL+C на клавиатуре, для копирования кода. Затем установите полученный код в нужное вам место.