Помочь проекту

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

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


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

Цвет текста:

Цвет фона:

Цвет границы:

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

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

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

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

Толщина границы:

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

Результат
Настройки анимации кнопки

Цвет фона:

Цвет текста:

Цвет границы:

Скорость анимации:

Дополнительные настройки

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

Скрыть от индексации (nofollow)

Включить анимацию

Внимание!

Стили CSS необходимо добавить на сайт только 1 раз. После необходимо добавлять кнопкам class="iksweb". Дизайн будет автоматически подтягиваться.

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

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

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

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

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

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

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

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