Онлайн генератор кнопок для сайта

Онлайн генератор кнопок для сайта

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

  • Инструмент
  • Комментарии

Комментарии

Алекс 10 октября 2022, 19:11

Хотелось бы добавить иконку перед текстом, а так круто, спасибо!

Галина 04 июля 2022, 18:45

Надпись на кнопке почему то на по центру относительно верха и низа. Это можно как то поменять?

Кирилл 30 июня 2022, 12:09

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

SVETLANA 17 октября 2021, 21:35

Спасибо за генератор,кнопка работает, ведет куда надо. Только поставить надо ее по центру.

Юрий 29 сентября 2021, 14:39

Можно ли в кнопку добавить картинку?
И как это сделать?
Спасибо.

Roman 16 марта 2021, 17:27

Здравствуйте! Что нужно добавить в код кнопки чтобы выровнять ее по центру блока «страницы»? Или как это сделать? Заранее спасибо!

Сергей 11 февраля 2021, 15:04

Простой и понятный генератор. Очень удобно делать кнопки. Спасибо! А можно ли как-то по мимо ссылки, добавить функцию копки «копировать в буфер обмена» ? Облазил весь интернет, но ни в одном генераторе такой возможности не нашел.

Александр 02 февраля 2021, 23:39

Добрый день.
Интересный генератор кнопки.
А такой вопрос — можно ли как-то средствами CSS сделать тень у кнопки? И, скажем, чтобы при наведении мыши она как-то менялась немножко ещё?

Daruse

Да, спасибо за идею, будет время — добавлю

Евгений 04 июня 2020, 13:46

Здравствуйте!
У Вас очень хороший конструктор!
Но есть один маленький вопрос: я выбираю исходный и конечный цвет текста кнопки абсолютно белый (#ffffff), и при просмотре результата он соответствует задуманному.


Но после установки кода на сайт обнаруживается, что начальный цвет голубой и с подчеркиванием (в итоге нет контраста, и надпись какая-то блёклая), при этом после наведения всё соответствует задуманному.
В чём проблема? Как от неё избавиться?

Daruse

Добрый день! Скинь мне ссылку, где вы добавили кнопку, на мою почту (в подвале есть контакты).
Подчеркивание — да, мой косяк, исправил.

Оставить комментарий

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

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

Создать кнопку онлайн 💚 HTML

Главная

Инструменты

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

Инструмент помогает создать кнопку для сайта на HTML и CSS без знаний.

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


Текст кнопки:

Ссылка кнопки:

Настройка цвета

Цвет текста:

Цвет фона:

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

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

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

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

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

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

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

Результат

Настройки анимации кнопки

Цвет фона:

Цвет текста:

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

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

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

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

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

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

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


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

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

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

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

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

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

Тип кнопки HTML Атрибут

❮ Тег HTML
 

Попробуйте сами »

Определение и использование

Атрибут type определяет тип кнопки.

Совет: Всегда указывайте атрибут типа для <кнопка> элемент. Разные браузеры могут использовать разные типы по умолчанию для . <кнопка> элемент.

Поддержка браузера

Атрибут
тип Да Да Да Да Да

Синтаксис




< кнопка >Danger

Шаг 2) Добавьте CSS:

Чтобы получить вид «текстовой кнопки», мы удаляем цвет фона и границы по умолчанию:

Пример

.btn {
  граница: нет;
  background-color: наследовать;
  отступ: 14 пикселей 28 пикселей;
размер шрифта: 16px;
  курсор: указатель;
  отображение: встроенный блок;
}

/* При наведении мыши */
. btn:hover {фон: #eee;}

.success {цвет: зеленый;}
.info {цвет: dodgerblue;}
.warning {цвет: оранжевый;}
.danger {цвет: красный;}
.default {цвет: черный;}

Попробуйте сами »

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

.btn {
   граница: нет;
цвет фона: наследовать;
    padding: 14px 28px;
размер шрифта: 16px;
    курсор: указатель;
отображение: встроенный блок;
}

/* Зеленый */
.success {
    цвет: зеленый;
}

.success: hover {
цвет фона: #04AA6D;
    цвет: белый;
}

/* Синий */
.info {
цвет: голубой;
}

.info:hover {
    фон: № 2196F3;
    цвет: белый;
}

/* Оранжевый */
.warning {
    color: апельсин;
}

. предупреждение: наведение {
    фон: #ff9800;
    цвет: белый;
}

/* Красный */
.danger {
    цвет: красный;
}

.danger:hover {
фон: #f44336;
    цвет: белый;
}

/* серый */
.по умолчанию {
    цвет: черный;
}

.default:hover {
    фон: #e7e7e7;
}

Попробуйте сами »

Перейдите к нашему руководству по кнопкам CSS, чтобы узнать подробнее о том, как стилизовать кнопки.

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Как Учебник
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

No related posts.