Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Кнопка HTML

Кнопка — самый часто используемый элемент WEB. Её HTML-код очень простой, и сейчас я вам покажу как он пишется и расскажу, что означают его символы и буквы.


В предыдущей статье мы научились создавать рамки.

В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.

Тег button — встраиваемый элемент. Его можно вставить в любую строку кода или текста.

Вместе с тем его можно вставить в любой блочный элемент, например теги (p или div)

Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Кнопки HTML</title>
</head>
<body>
<p><button>Кнопка</button></p>
</body>
</html>

А вот результат, можно пощёлкать. Тег button по умолчанию создаёт интерактивную кнопку.

Следующую кнопку сделаем с применением тегов таблиц.
Код:

<p><button> <table border="1"> <tr> <td>Кнопка</td></tr></table></button></p>

Результат:

К сожалению настройки моей темы не позволяют мне в полной мере использовать оформление таблицы, но об этом очень подробно рассказано и показано в статье Таблицы HTML

Оформление кнопки

Дальше немного интереснее, так как в следующем примере мы в тег button, введём атрибут style и сможем использовать стилевые свойства.

А это значит, что кнопке можно будет придать более оригинальное оформление.

Код:

<button style="background: #fdeaa8; width: 80px; height: 40px; border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;">Кнопка</button>

Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.

Давайте подробно рассмотрим, какие свойства мы применили для оформления.

1. background: #fdeaa8; — цвет кнопки;

2. width: 80px; — ширина кнопки;

3. height: 40px; — высота кнопки;

4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;

5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;

6. font-size: 20px; — размер текста;

В тег button можно вставить и картинку.

Код:

<button style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png" style="vertical-align: middle;">Кнопка</button>

Результат:

Ещё один атрибут, который можно применить для кнопки — это title.

Его действие заключается в том, что при наведении курсора на кнопку, будет появляться окно подсказки, с текстом, который мы в этот атрибут введём.

Обычно в нём указывается место, в которое ведёт данная кнопка.


Код:

<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png" style="vertical-align: middle;">Кнопка</button>

Результат:

Как сделать кнопку ссылкой.

Для этого к тегу button применяется событие onclick.

В значении указывается адрес, по которому и будет осуществлён переход. К примеру так:

onclick="location.href=’https://starper55plys.ru/’;".

И полный код кнопки будет выглядеть так:

<button title="Страница 23" onclick="location.href='https://starper55plys.ru/';style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png" style="vertical-align: middle;">Кнопка</button>

Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт.

Если расположить несколько button в строку друг за другом, то получится вот такое меню, которое можно использовать как постраничную навигацию.

Ссылка вместо кнопки

Если не использовать кнопку в скриптах, то её можно сделать практически из любого тега, например из ссылки <а></а>.

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

Вот самая простая форма, которую можно придать ссылке


<a style="background: #fdeaa8; border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px; padding:10px; text-decoration:none;" href="*">Кнопка</a>

Кнопка

А вот как придать ей интерактивность трансформацию и анимацию, смотрите в статье Кнопки CSS с оригинальными эффектами

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Настоящий еврей зарабатывает тысячу долларов в месяц, две тысячи отдает жене, а на оставшиеся три живет сам.

Рамки html < < < В раздел > > > Красивая заглавная буква и бегущая строка HTML

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

24 комментария на «Кнопка HTML»

  1. Инна говорит:

    ОГРОМНОЕ СПАСИБО ЗА ПОЛЕЗНЫЙ МАТЕРИАЛ!!!!!

  2. stariс говорит:

    Хоть скажите, а куда вам надо-то её, так сказать, залить? Если сайт, то html или на CMS на какой? Есть там загрузчик изображений или нет? Или страница в сети? Или ещё что.

  3. Виктор говорит:

    Расскажите, куда заливать изображение кнопки в png без фона из фотошопа, что бы она работала. какой код. как указать путь. разжуйте для неандертальцев пожалуйста!

  4. stariс говорит:

    Нет не пользуюсь. Я всё это могу написать.

  5. Inwer говорит:

    Подскажите, вы вот этим c-wd.ru/tools/cnopka/ инструментом пользуетесь?

  6. stariс говорит:

    Как делаются подобные кнопки показано и рассказано на страницах
    https://starper55plys.ru/css/pseudo-class-css/,
    https://starper55plys.ru/css/knopki-s-effektami/
    https://starper55plys.ru/css/kak-sdelat-ten/
    Вам нужно будет только подправить некоторые свойства css (цвета, размеры), чтоб получить желаемый результат.

    Или заказать изготовление кнопки на фрилансе, или мне за 500 руб.

  7. Артем говорит:

    Добрый день !

    Как сделать кнопку, как на страничке
    «КУПИТЬ АКЦИИ», в HTML коде ?

  8. Данька Щербаков говорит:

    Как сделать кнопку сохранить?Например ты написал на сайте Публикацию.Вот,теперь как её сохранить?

  9. stariс говорит:

    Да Миша, по обратной связи у меня почти ничего нет, так как все мои сайты на вордпресс, а у него эта функция есть по умолчанию. Вам посоветую копнуть по запросу Формы комментариев, или Скрипт комментариев. Я сейчас глянул — полно готовых решений. И на форумах и на сайтах. Можно сделать как на вордпресе на каждой странице, можно на отдельной странице, и на неё ссылку из шапки.

    Как пишутся сами формы обратной связи у меня есть https://starper55plys.ru/html/formyi-html-teg-input/, остаётся только подобрать скрипт отправки, ну и можно оформление в css добавить.

  10. Михаил говорит:

    Здравствуйте, мне очень понравились Ваши мастер-классы на сайте. Со стороны кажется это так просто и легко. Класс!!! Скачал себе программу «Мини-сайт (Minisite.4.3)» с целью разработки веб-сайта, Вроде, тоже все понятно и прост в работе, но как выяснилось, нет блока «Обратная связь или задать вопрос» для письменного обращения к адресату. т.е. ко мне… Блин, голову сломал искать коды HTML…Помогите найти код.. Заранее спасибо!!!

  11. stariс говорит:

    Вообще-то ваш вопрос не в теме. Такие вещи делаются на javascript или php.

    Вариант на javascript

    var copyTextareaBtn = document.querySelector(‘.js-textareacopybtn’);

    copyTextareaBtn.addEventListener(‘click’, function(event) {
    var copyTextarea = document.querySelector(‘.js-copytextarea’);
    copyTextarea.select();

    try {
    var successful = document.execCommand(‘copy’);
    var msg = successful ? ‘successful’ : ‘unsuccessful’;
    console.log(‘Copying text command was ‘ + msg);
    } catch (err) {
    console.log(‘Oops, unable to copy’);
    }
    });
    <p>
    <textarea class=»js-copytextarea»>Код</textarea> // Поле в котором публикуется код, текст
    </p>

    <p>
    <button class=»js-textareacopybtn»>Сохранить</button> // Текст в кнопке
    </p>

    Добрый.

    .

  12. Злая говорит:

    Как сделать кнопку «Сохранить»?
    Иначе говоря, на странице опубликован короткий код (текст), нужно создать кнопку, при нажатии на которую сохранялся бы этот текст в буфере обмена (ClipBoard) удалённого компьютера, или, на худой конец, предлагался бы диалог «Сохранить как…»

  13. stariс говорит:

    В этом посте, тёзка, css нет. Все значения в атрибуте style. Это чистый html. Вставьте приведённый код в том месте статьи, или другого блока где нужна кнопка, и она там появится. Только в статью код надо вставлять в режиме Текст. В визуальном не получится. Правда возможно придётся подкорректировать и внешний вид кнопки и её положение на странице, а может и нет.

    Но если корректировать, то тут уж надо будет поучить и html и css. Никто запростотак не будет ковыряться в вашем шаблоне, выискивая что там задано кнопкам, и задавать отступы, чтоб разместить её точно там где надо.

    Из самого первого кода надо взять только тег p и всё что в нём. Остальное это каркас страницы.

    Чтоб кнопка работала, про это есть в статье.

  14. Сергей говорит:

    Да все прекрасно спасибо. Да вот только как сделать что бы эта кнопочка появилась у меня на странице??? У меня есть html и css куда что вставлять что бы у меня на странице эта кнопочка появилась??? Я на пример не знаю. Все описывают как написать на css а как вставить что бы работала не пишут. Помогите пожалуйста если хотите конечно. Заранее спасибо. Плиз

  15. stariс говорит:

    Чтоб поместить текст в кнопку нужно поместить его в код кнопки перед закрывающим тегом. Чтобы иметь возможность придать кнопке вид заголовка или строки, для создания кнопки надо использовать тег а, а не button

  16. Николай говорит:

    Здравствуйте скажите пожалуйста а как верхнюю строку сделать кнопкой? Что бы блок с кнопки открывался?

  17. Иван. говорит:

    Спасибо за ответ, но у меня так не работает. Я нашел сегодня сам как можно сделать, вместо onclick=»window.location=’ пишется onclick=»window.open(‘. Еще раз спасибо.

  18. Иван говорит:

    Здравствуйте. Скажите пожалуйста, как сделать кнопку работающую через «onclick», чтобы открывала страницу в новой вкладке, если это возможно.

  19. stariс говорит:

    К сожалению такого нет, но есть статья про шордкоды.
    Если то, что вы хотите вставить в виджет, заключить в шорткод, в файле function.php, и спозиционировать, а потом вставить маячок шорткода в файл footer, или sidebar.php, то этот элемент будет выводится там, где Вам нужно. Правда придётся повозится с позиционированием.

  20. Константин говорит:

    А нет ли у вас на сайте статьи по поводу добавления дополнительной области для виджетов или переместить уже существующею?

  21. stariс говорит:

    Нормально. Только я бы сделал их такими же как в левой колонке, или поближе к ним. Ну там цвет, градиент и шрифт. А то они как-то уж больно из общей картины выделяются.
    И вот тут кнопочки уже покруче.

  22. Константин говорит:

    Большое спасибо! Добавил Ваши кнопочки себе на сайт.

  23. stariс говорит:

    Очень рад, что у вас получилось, но вот тег или спецсимволы опять не применили. Посмотрите что получается. Я потом исправлю.

  24. Сергей говорит:

    Нашел ответ на одном из форумов. Цитирую:

    «потому что не надо делать шорткодом кнопку. можно точно так же разукрасить при помощи css

    а дальше правь стили и выноси их в style.css»

    Что же, пока сделал кнопку таким образом. На данном этапе меня устраивает, потом буду улучшать с помощью CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *