Сделать кнопку html: Как сделать кнопку в HTML — журнал «Доктайп»

Как создать текстовые кнопки

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ НазадВперед ❯

Узнать, как стилизовать текстовые кнопки с помощью CSS.

Стиль кнопки текста

Шаг 1) Добавить HTML:

Пример

<button>Успех</button>
<button>Информация</button>
<button>Предупреждение</button>
<button>Опасность</button>
<button>По умолчанию</button>

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

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

Пример

.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

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

.success {color: green;}
.info {color: dodgerblue;}
. warning {color: orange;}
.danger {color: red;}
.default {color: black;}

Редактор кода »

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

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

Пример

.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

/* Зеленый */
.success {
    color: green;
}

.success:hover {
    background-color: #4CAF50;
    color: white;
}

/* Синий */
.info {
    color: dodgerblue;
}

.info:hover {
    background: #2196F3;
    color: white;
}

/* Оранжевый */
.warning {
    color: orange;
}

.warning:hover {
    background: #ff9800;
    color: white;
}

/* Красный */
.danger {
    color: red;
}

.danger:hover {
    background: #f44336;
    color: white;
}

/* Серый */
. default {
    color: black;
}

.default:hover {
    background: #e7e7e7;
}

Редактор кода »

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

❮ НазадВперед ❯

ВЫБОР ЦВЕТА

ТОП Учебники

ТОП Справочники

ТОП Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа! —

Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка «a href=»адрес»>Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

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

Первый способ

Сделать обычную ссылку, визуально похожей на кнопку, можно с помощью написания своих стилей

Итак, создаем обычную ссылку. И указываем адрес к нашим стилям, которые напишем чуть-чуть ниже.

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом ««!

<a href="you-hands.ru"><img src="button.png"></a>

Правда, теперь, если вы захотите сменить текст, вам придется нарисовать кнопку заново. Плюс, такая кнопка занимает больше места, трафика и времени загрузки страницы. Такой способ можно использовать для создания сложных кнопок, таких, которые невозможно сделать стилями CSS.

Третий способ

Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

Выглядеть такая ссылка будет как вам захочется. Нужно только придумать и написать стиль для нее. Текст меняется легко и не загромождает

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

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

Первый способ

Для того что-бы кнопка вела себя как ссылка, можно создать для нее форму, а внутри разместить одну лишь кнопку.

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

Второй способ

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

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

<button type="submit">Кнопка как ссылка 2</button>

Третий способ

Этот способ очень похож на второй, однако используется немного по другому. Отдельный JS код нам не понадобиться

<button type="submit">Кнопка как ссылка 3</button>

Итоги

Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!

4.17/5 (12)

Оцените

Рейтинг

HTML-тег кнопки — использование, атрибуты, примеры

❮ Пред. Следующий ❯

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

Используйте элемент для определения кнопки в HTML-форме, поскольку браузеры по-разному отображают содержимое тега

.

Тег

идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

 

  <голова>
    
  
  <тело>
     
Здесь будет наша кнопка