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

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

Текст кнопки:
Ссылка кнопки:
Настройка цвета
Настройка Размеров

Цвет текста:

Цвет фона:

Цвет обводки:

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

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

Горизонтальные отступы:


Вертикальные отступы:


Закруглённость:


Толщина обводки:


Размер шрифта:

Выравнивание кнопки

По левому краю

По центру

По правому краю

Открытие ссылки на новой вкладке

Результат


Код для установки на сайт
Реклама
Что такое кнопка?

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

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

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

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

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

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