Кнопка HTML.

Здравствуйте уважаемые начинающие веб-мастера.

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

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

Тег button не является блочным элементом, и его можно вставлять в другие теги HTML.

Тем более это нужно делать, ведь обычно кнопка располагается как отдельный элемент, и если её не поместить в блок (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>

А вот результат, можно пощёлкать.

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

Код:

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

Результат:
Кнопка HTML

Действует она точно так же как и первая, только вид немного другой. Кстати, если добавить в тег table атрибуты таблиц, то можно этот вид изменить ещё больше.

Дальше немного интереснее, так как в следующем примере мы в тег 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>

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

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

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

Кнопки с различными эффектами при наведении и нажатии, смотрите в статье Кнопки CSS с оригинальными эффектами

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

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

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

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

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

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

17 комментариев на «Кнопка HTML.»

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

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

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

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

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

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

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

  4. 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>

    Добрый.

    .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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