Как сделать переход на другую страницу в html через кнопку

Обновлено: 04.07.2024

Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.

Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.

Как сделать кнопку на CSS

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

Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент "Веб-разработка".
Как пользоваться инструментом "Веб-разработка Firefox Mozilla" подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type="button | reset | submit"). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = "button") несколькими параметрами.

Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.

Когда применяется тег button?

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

Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:

:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в "половинном" состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML

Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.

Кнопки внутри формы

Тег input

Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.

Тег button

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

Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).

Теги input и button могут обрабатываться скриптом, например при событии клика.

Пример верстки кнопок внутри формы

Button

Input

Кнопки-ссылки

Практически на каждом сайте встречаются ссылки в виде тега a, но оформленные с помощью CSS, как кнопки. Чаще всего такие кнопки-ссылки, используются как элементы навигации на сайте: пункты меню, переход на следующую страницу, в рекламном блоке. Вот такие дизайнерские кнопочки не имеет смысла вставлять тегом button, лучше сразу вставлять тегом a с каким-нибудь классом или ID. Поскольку эта кнопка будет куда-то все равно ссылаться.

Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.

Скриншот

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Используйте для кнопок — кнопки, а для ссылок — ссылки.

Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.

Для кого эта статья?

В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.

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

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

Содержание

Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от , в содержимое
button можно писать любой HTML код, а не только текст.
Например

Это даёт даже больше свободы в стилевом оформлении чем

Состояния

Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited , зато есть состояние :disabled .
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.

Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap "и новомодный MaterializeCSS, например.

Отображение

Так выглядит Кнопка в моём Chrome 54:

На картинке button , button:hover , button:focus , button:active соответственно.

Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

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

Кнопка

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

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

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

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

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

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

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

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

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

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

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

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

Перемена

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

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

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

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

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

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

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

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

Вообще-то ваш вопрос не в теме. Такие вещи делаются на 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’);
>
>);

// Поле в котором публикуется код, текст

Сохранить // Текст в кнопке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: