Кнопки на сайте: гайд по видам и созданию
Красивая и заметная кнопка – неотъемлемый атрибут любой продающей и интересной страницы, который облегчает навигацию и позволяет монетизировать ресурс. Такие маркетинговые инструменты могут использоваться в статьях и формах с любой тематикой, принося владельцу стабильный доход. Сегодня рассмотрим, как сделать кнопку на сайте с помощью самых простых тегов.
Для чего нужны кнопки на сайте
Ссылки, оформленные в привлекающие внимание виджеты, делают страницу визуально аккуратной и, по сути, заменяют call-to-action. Например, кнопки:
- сообщают о скидке и выгодных спецпредложениях;
- мотивируют купить и товар или услугу, а также оставить отзыв;
- активируют промокод;
- побуждают сделать пожертвование или поучаствовать в сборе средств на какой-либо стартап;
- предлагают оформить подписку или отправить запрос;
- переводят на страницу партнеров;
- помогают связаться с вами по телефону, в онлайн-чате или через популярные мессенджеры.
Кнопка призывают пользователя совершить то или иное действие, в котором заинтересован владелец веб-площадки. Разобравшись, как добавить кнопку на сайт, вы сможете повысить его эффективность, наладить обратную связь, расширить свою аудиторию и поднять продажи.
Какие бывают кнопки
Плоские
Выделяются цветом, подходящим под дизайн площадки.
Объемные
Варианты с подъемом, чаще всего реализуются в форме прямоугольника с закругленными краями. Их также делают цветными.
В виде бегунка
Помогают настроить точные параметры запроса. Отличное решение для онлайн-калькуляторов.
Переключатель
Как называются кнопки на сайте, которые активируют ту или иную функцию? Конечно, переключатели, работающие в режиме «Включить»/«Выключить».
Плавающая
В выпадающем меню содержатся списки товаров, услуг из каталога или второстепенные подразделы.
Кнопки бывают анимированными, активными, в фокусе, но они в любом случае должны стилистически совпадать с другими элементами сайта, брендбуком компании-владельца. Важно, чтобы они находились в привычных местах, а при нажатии меняли свое состояние на активное или неактивное. Так пользователь сможет понять, что, к примеру, товар добавлен в корзину.
В Библиотеке шаблонов конструктора Taptop представлены готовые кнопки с разным функционалом. Достаточно адаптировать выбранный элемент под общую концепцию своего портала и добавить эффективный призыв к действию, чтобы привлечь потенциальных клиентов.
Как сделать кнопку на сайте в HTML?
Процесс создания кнопок в HTML реализуется пошагово:
Шаг 1. Добавление тега <button>
Внутри тега <body> необходимо прописать тег <button>, который и будет отвечать за кнопку. В коде это выглядит так: <button>кнопка</button>, где кнопка – текст, который будет размещен на данном элементе.
Шаг 2. Стилизация
Внешний вид кнопки должен соответствовать общей дизайнерской концепции вашего портала, поэтому с помощью CSS стилей необходимо установить ее размер, цвет и указать положение на странице. Работа с кодом осуществляется в файле styles.css. Теги, при этом, выглядят следующим образом:
button {
background-color: #4CAF50; /* Цвет фона */
border: none; /* Удаление границы */
color: white; /* Цвет текста */
padding: 16px 32px; /* Размер и отступы */
font-size: 12px; /* Размер шрифта */
cursor: pointer; /* Курсор при нажатии */
Прописав эти команды, мы получим зеленую кнопку с 12–ым кеглем текста на ней.
Шаг 3. Интерактивность
Подумайте, что должно происходить после нажатия на кнопку. Добавить интерактивности элементу поможет атрибут onclick с функцией JavaScript внутри тега <button>. Функция кнопки может быть простой, например, открытие новой страницы или выполнение действия на текущей странице. Чтобы после клика пользователь мог перейти на другую страницу, в коде необходимо прописать:
Function myFunction() {window.open("https://www.адрес страницы.com"); /* Открытие новой страницы */}.
Команду «window.open()» можно заменить на любое желаемое действие.
Шаг 4. Тестирование
После того как код добавлен, а стили – настроены, убедитесь, что кнопка работает. Откройте сайт с любого браузера и проверьте, как выглядит элемент и выполняется ли после клика по нему нужная команда.
Taptop: когда знание кода не нужно
В нашем конструкторе не требуется писать сложный код для того, чтобы добавить любые элементы сайта: кнопки, формы или виджеты. Воспользуйтесь Визуальным редактором, чтобы кастомизировать элемент – задавайте кнопке любой размер, меняйте ее оттенок, скругляйте углы всего парой кликов. Функционал Taptop позволяет изменить дизайн абсолютно любой кнопки, включая те, которые располагаются внутри форм.
Конечно, если возможностей конструктора не хватит, вы всегда можете добавить любой кастомный код: открытый код сайта, генерируемый конструктором, вполне позволяет это сделать.
Сайты, созданные в Taptop, подходят под различные коммерческие, развлекательные, образовательные проекты. Благодаря функционалу конструктора вы можете создать портал, соответствующий трендам в веб-верстке, чтобы площадка выглядела привлекательно и была удобной для представителей любой целевой аудитории.
