Кнопка в css: Buttons Основные стили кнопок CSS уроки для начинающих академия

Содержание

html/css, сделайте кнопку похожей на div



HTML кнопки позволяют вам нажать Как enter, так и Пробел, чтобы нажать кнопку. Однако использование кнопки также сопровождается кучей CSS, которые разрушают то, как мы хотим, чтобы наша кнопка выглядела.

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

html css
Поделиться Источник Jeremy     27 июня 2018 в 21:24

2 ответа


  • Есть ли способ сделать кнопку Google Web Toolkit (GWT) похожей на гиперссылку HTML?

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

    Для этого мне нужно сделать так, чтобы соответствующий текст действовал…

  • Сделайте div видимым и измените весь html на более темный

    У меня есть div, и после того, как я нажму кнопку, Я хотел бы, чтобы div появился (что я могу сделать), но я хотел бы, чтобы весь фон тоже стал темнее (это встроено в оверлеи). Я пробовал использовать непрозрачность — я меняю непрозрачность всего html на jQuery, то есть…



2

Я смог исправить это с помощью всего лишь:

button {
    background-color: transparent;
    border: none;
}

Поделиться Jeremy     27 июня 2018 в 21:54



1

Некоторые стили CSS вы всегда должны иметь возможность применять к кнопкам HTML:

  1. цвет фона -> изменить цвет фона кнопки.
  2. размер шрифта -> изменить размер шрифта метки кнопки.
  3. заполнение -> изменить заполнение кнопки.
  4. граница-радиус -> добавить закругленные углы к кнопке.
  5. свойство границы -> добавить цветную границу к кнопке.
  6. поле-свойство тени -> добавить тени к кнопке.


Вот пример кнопки с цветной рамкой:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: white; /* button background */
    color: black; /* label colour */
    border: 2px solid #0040ff; /* 2px blue line border */
    padding: 10px 20px;
    border-radius: 10px; /* rounded corner style */
}
</style>
</head>
<body>

<h3>A styled button.</h3>

<button>Button label</button>

</body>
</html>

Поделиться

Chuck     27 июня 2018 в 21:45


Похожие вопросы:


Как использовать только кнопку CSS markup?

Для моего любопытства, учитывая кнопку CSS-only markup, подобную этой: http:/ / www. cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043 , можно создать кнопку визуально , используя: <div…


Как я могу сделать кнопку похожей на ссылку-в частности: текст-украшение подчеркивание / нижняя граница

Как я могу сделать кнопку похожей на якорный тег? Я попробовал HTML ниже, но когда я навожу курсор на кнопку, нижняя граница выглядит не так, как другие теги привязки. Нижняя граница выглядит…


Как использовать div+css сделайте три столбца в html

Как использовать div+css сделайте три столбца в html. левый и правый столбцы width:auto, а средний нужен width:990px(должен быть в центре), и они составляют height:100%. HTML <div style=…


Есть ли способ сделать кнопку Google Web Toolkit (GWT) похожей на гиперссылку HTML?

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

..


Сделайте div видимым и измените весь html на более темный

У меня есть div, и после того, как я нажму кнопку, Я хотел бы, чтобы div появился (что я могу сделать), но я хотел бы, чтобы весь фон тоже стал темнее (это встроено в оверлеи). Я пробовал…


Как сделать стену похожей на Facebook?

Я хочу использовать (div) в качестве элемента (textarea) в html. Потому что, когда я использовал (textarea), его ширина и высота не были фиксированы. Я хочу, чтобы, когда кто-то откроет мой сайт, он…


Как сделать кнопку похожей на ссылку в ZK

Итак, я хочу привязать событие label и onClick ссылки к Бобу java в ZK. Поэтому я попробовал <a [email protected](‘reset’)/> Но <a> не имеет атрибута label . <button> имеет как…


Сделать кнопку Выбрать файл похожей на div

У меня есть форма отправки файла, и я хочу изменить внешний вид кнопок. Ранее я делал это таким образом, обертывая входные данные формы в divs, а затем используя CSS, чтобы сделать divs определенным. ..


Сделайте одну форму HTML похожей на другую

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


сделайте кнопку похожей на пролет в html

У меня есть кнопка, как показано ниже. <button type=submit class=search-btn id=search-submit-header></button> У него есть определенная функциональность, которую я хочу применить к этому…

:active — CSS | MDN

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

Также псевдокласс :active

срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link:visited

:hover:active.

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Активные ссылки

HTML
<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё. </a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>
CSS
a:link { color: blue; }          
a:visited { color: purple; }     
a:hover { background: yellow; }  
a:active { color: red; }         

p:active { background: #eee; }   
Результат

Активные элементы формы

HTML
<form>
  <label for="my-button">Моя кнопка: </label>
  <button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>
CSS
form :active {
  color: red;
}

form button {
  background: white;
}
Result

BCD tables only load in the browser

Кнопки закрытия на CSS

.cl-btn-1 {

    margin: 20px;

    position: relative;

    display: flex;

    justify-content: center;

    height: 112px;

}    

.cl-btn-1 div {

    width: 100px;

    height: 100px;

    position: absolute;

    background-image: radial-gradient(#FFF, #BFE2FF);

    border-radius: 50%;

    transition: all 0. 4s cubic-bezier(0.215, 0.61, 0.355, 1);

    border: 6px solid #337AB7;

    cursor: pointer;

}

.cl-btn-1 div > span {

    background-color: #337AB7;

    display: block;

    height: 12px;

    border-radius: 6px;

    position: relative;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    position: absolute;

    top: 50%;

    margin-top: -6px;

    left: 18px;

    width: 64px;

}

.cl-btn-1 div > span span {

    display: block;

    background-color: #215b8c;

    width: 12px;

    height: 12px;

    border-radius: 6px;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    position: absolute;

    left: 0;

    top: 0;

}

.cl-btn-1 div > span.left {

    transform: rotate(45deg);

    transform-origin: center;

}

.cl-btn-1 div > span.left .circle-left {

    transition: all 0. 4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div > span.left .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div > span.right {

    transform: rotate(-45deg);

    transform-origin: center;

}

.cl-btn-1 div > span.right .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div > span.right .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span {

    background-color: #215b8c;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.cl-btn-1 div:hover > span span {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-color: #337AB7;

}

.cl-btn-1 div:hover > span. left .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span.left .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div:hover > span.right .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span.right .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

Скошенная кнопка — css | Кабинет Веб-мастера

Как сделать скошенную кнопку с помощью css легко и просто без использования картинок? Оказывается — очень просто. Давайте разберемся с этим.

Для начала создадим простую html структуру нашей кнопки:

<div>
	<a href="/">Нажми меня</a>
</div>

Теперь зададим базовые стили оформления:

. button-container {
	text-align:center;
	margin:300px;
}
.button {
	display:inline-block;
	vertical-align:top;
	padding:0 25px;
	height:60px;
	color:#fff;
	text-decoration:none;
	font-family:Arial, sans-serif;
	font-size:14px;
	line-height:60px;
	font-weight:bold;
	letter-spacing:0.05em;
	text-transform:uppercase;
	background:#00B98B;
	text-align:center;
	position:relative;
}
.button:hover {
	opacity:0.8;
}

После этого наша кнопка будет выглядеть вот так:

Давайте теперь разберемся как сделать скошенные края? Для этого будем использовать псевдоэлементы before и after. Вот стили для них:

.button:before {
	content:'';
	display:block;
	clear:both;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-bottom:60px solid #00B98B;
	position:absolute;
	top:0;
	left:-30px;
}
.button:after {
	content:'';
	display:block;
	clear:both;
	width:0;
	height:0;
	border-right:30px solid transparent;
	border-top:60px solid #00B98B;
	position:absolute;
	top:0;
	right:-30px;
}

Вот и все. Полный код страницы для наглядности:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Как сделать скошенную кнопку - css</title>
</head>
<style>
	.button-container {
		text-align:center;
		margin:300px;
	}
	.button {
		display:inline-block;
		vertical-align:top;
		padding:0 25px;
		height:60px;
		color:#fff;
		text-decoration:none;
		font-family:Arial, sans-serif;
		font-size:14px;
		line-height:60px;
		font-weight:bold;
		letter-spacing:0.05em;
		text-transform:uppercase;
		background:#00B98B;
		text-align:center;
		position:relative;
	}
	.button:hover {
		opacity:0.8;
	}
	.button:before {
		content:'';
		display:block;
		clear:both;
		width:0;
		height:0;
		border-left:30px solid transparent;
		border-bottom:60px solid #00B98B;
		position:absolute;
		top:0;
		left:-30px;
	}
	.button:after {
		content:'';
		display:block;
		clear:both;
		width:0;
		height:0;
		border-right:30px solid transparent;
		border-top:60px solid #00B98B;
		position:absolute;
		top:0;
		right:-30px;
	}
</style>
<body>
	<div>
		<a href="/">Нажми меня</a>
	</div>
</body>
</html>

Создание универсальных графических кнопок с помощью CSS

Вольный перевод статьи “Creating bulletproof graphic link buttons with CSS” (мои комментарии – курсивом).

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

Эта кнопка должна:

  • Автоматически растягиваться горизонтально, чтобы вместить любое количество текста.
  • Растягиваться горизонтально и вертикально, если объем текста увеличен или если текст разделен на несколько строк.
  • Иметь размер в разумных пределах.
  • Позволять изменять углы на круглые или другие неквадратные.
  • Иметь всю площадь кнопки кликабельной.
  • Быть удобочитаемой при отключенных изображениях.

Выполнение этой задачи с помощью CSS может показаться простым, но при этом есть несколько затруднений, которые требуют хитрого решения.

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

Реальная кнопка формы (обычно <input type="submit">), работает одинаково хорошо без CSS и JavaScript. Однако, оформленная ссылка для сабмита формы может использовать JavaScript. А последний, как известно, не всегда бывает доступным, поэтому нужно принимать сие обстоятельство во внимание.

Проблемы, как это обычно бывает при работе с CSS, исходят от Internet Explorer. Первая заключается в том, что IE неправильно определяет ширину блочных элементов внутри “плавающих” элементов (имеющих свойство “float”), которым не задана ширина.

Когда для “плавающего” элемента не указана ширина, браузер должен скорректировать ширину элемента с учетом его содержания. В случае с нашей кнопкой-ссылкой данное свойство как раз бы пригодилось, поскольку это заставит ссылку автоматически корректировать ширину в зависимости от количества текста, который она содержит. К сожалению, Internet Explorer не будет должным образом отображать следующую комбинацию HTML и CSS.


<div>
  <div><div></div></div>
  <div><div><a href="#">A box</a></div></div>
  <div><div></div></div>
</div>

Когда “плавающему” блоку div.cb не задана ширина, он будет растянут с учетом его содержания. Ширина зависит от содержимого элемента div.i1, и эта часть прекрасно работает. Проблема заключена в элементах div.bt и div.bb, которые не растягиваются на ту же ширину, что и div.i1. Ее можно было бы обойти, задав ширину элементу div.cb, но нам нужно получить растягивающуюся кнопку, поэтому пришлось искать другое решение.

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

Действительно, мне тоже не раз приходилось сталкиваться с этим багом в Internet Explorer (до 7-й версии), когда при изменении размера окна браузера появляется отступ в 1px, что сразу же бросается в глаза. Наблюдается это как раз в случаях с абсолютным позиционированием.

Результатом явилось вот такое решение для кнопки в виде ссылки, которая содержит четыре вложенных элемента span:


<a href="#">
  <span>
    <span>
      <span>
        <span>Кнопка-ссылка на CSS!</span>
      </span>
    </span>
  </span>
</a>

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

И конечно нам нужно немного CSS, чтобы сделать наши кнопки привлекательными:


button { /* верхний левый угол, верхняя граница */
  float: left;
  color: #DDD; /* цвет текста */
  background: #333 url(button. gif) no-repeat; /* цвет фона при отключенных изображениях */
  font: 1.2em/1.0 Georgia,serif;
  text-decoration: none;
}
.button * {display:block;}
.button span { /* верхний правый угол */
  padding: 6px 0 0;
  background: url(corners.gif) no-repeat right top;
}
.button span span { /* нижний левый угол, левая и нижняя границы */
  padding: 0 0 0 6px;
  background: url(button.gif) no-repeat left bottom;
}
.button span span span { /* нижний правый угол */
  padding: 0 0 6px;
  background: url(corners.gif) no-repeat right bottom;
}
.button span span span span { /* правая граница */
  padding: 3px 12px 3px 6px; /* отступы от текста */
  background: url(button.gif) no-repeat right center;
}
.button:hover,
.button:focus,
.button:active { /* подсказка для клавиатуры */
  outline: 2px solid #ff0; /* не поддерживается в IE/Win */
  color: #FFF;
}

Можно посмотреть несколько готовых примеров кнопок-ссылок.

Безусловно, в приведенном решении вместо тэга span можно использовать более короткий тэг, например b, тогда и HTML-код, и CSS-код станет компактнее и симпатичнее.

Идеально вид кнопок был бы достигнут при использовании только одного фонового изображения, что и было моей первоначальной целью. Я не сумел достигнуть этой цели и вынужден прибегать к использованию двух изображений (button.gif и corners.gif). Если Вы на них посмотрите, то заметите, что их размер гораздо больше, чем любая кнопка, которая получается в итоге, так как изображения определяют максимальный размер кнопки.

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

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

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

* * *

Работай и зарабатывай на рынке Форекс вместе с компанией FOREX MMCIS group, надежным дилинговым центром мирового уровня. В этом Форекс брокере для вас созданы лучшие условия.

HTML и CSS с примерами кода

Тег <button> (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью <input> (с атрибутом type="button | reset | submit").

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

Формы

Синтаксис

Закрывающий тег обязателен.

Атрибуты

autofocus
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает между собой форму и кнопку.
formaction
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
Способ кодирования данных формы.
formmethod
Указывает метод пересылки данных формы.
formnovalidate
Отменяет проверку формы на корректность.
formtarget
Открывает результат отправки формы в новом окне или фрейме.
name
Определяет уникальное имя кнопки.
type
Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты.

autofocus

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

Синтаксис

<button autofocus>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

disabled

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

Синтаксис

<button disabled>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

form

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form>, например, при создании её программно.

Синтаксис

<button form="<идентификатор>">...</button>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>. Если одновременно указать action и formaction, то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction.

Синтаксис

<button formaction="<адрес>">. ..</button>

Значения

Нет.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>.

Синтаксис

<button
  formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
>
  ...
</button>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

  • application/x-www-form-urlencoded

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<button formmethod="get | post">...</button>

Значения

Различают два метода — GET и POST.

GET
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
POST
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.

Синтаксис

<button formnovalidate>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget

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

Синтаксис

<button
  formtarget="<имя фрейма> | _blank | _self | _parent | _top"
>
  ...
</button>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.

_blank
Загружает страницу в новую вкладку браузера.
_self
Загружает страницу в текущую вкладку.
_parent
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

name

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

<button name="<имя>">...</button>

Значения

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

Значение по умолчанию

Нет.

type

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис

<button type="button | reset | submit">...</button>

Значения

button
Обычная кнопка.
reset
Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
submit
Кнопка для отправки данных формы на сервер.
menu
Открывает меню, созданное с помощью элемента <menu>.

Значение по умолчанию

value

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <button>, а значение — атрибутом value. Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Синтаксис

<button value="<текст>">...</button>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>BUTTON</title>
  </head>
  <body>
    <p>
      <button>Кнопка с текстом</button>
      <button>
        <img
          src="image/umbrella.gif"
          alt="Зонтик"
         
        />
        Кнопка с рисунком
      </button>
    </p>
  </body>
</html>

Ссылки

Плавающая кнопка сбоку сайта на CSS + HTML

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

Итак, первое, что нужно сделать:

добавить данный участок кода сразу после открывающегося тега <body>. В WordPress это будет в файле header.php:

<a href="адрес сайта/путь ссылки"><img title="Кнопка палитра" src="адрес сайта/wp-content/ваш шабллон/путь к картинке" alt="buttons" /></a>

Как не сложно догадаться, мы добавляем картинку и оборачиваем ее в ссылку. При желании картинку можно заменить любым текстом, обернутым в <div>. Текст можно сделать вертикальным, добавить отступы (padding) и залить фон цветом. Будет похоже на кнопку.

Теперь осталось добавить подходящие стили для нашей плавающей кнопки:

.add_palitra {
display: block;
width: 80px;
height: 150px;
position: fixed;
right: 0;
top: 200px;
z-index: 99999;
}

Параметры width и height — это ширина и высота изображения. Корректируйте их под себя. Параметр top — это отступ от верхнего края экрана. Если хотите скорректировать разную высоту под разные разрешения экрана, то добавьте что-то такое:

@media screen and (max-width: 480px) {
.add_palitra {
top: 100px !important;
}
}

Элемент z-index задает расположения элемента поверх всех остальных. Учтите, при изменении значения кнопка может «провалиться» под другие элементы.

right:0 — «прилепляет» картинку или текст к правой части экрана.

Это все. Мы создали кнопку поверх всех остальных элементов. Осталось придумать, куда она будет вести.

Если Вы хотите по кнопке выводить всплывающее окно с формой обратной связи, то можете воспользоваться плагинами Popup Maker иContact Form 7. Делается все достаточно просто:

HTML тег кнопки


Пример

Кнопка, на которую можно нажать, помечена следующим образом:

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Тег


Попробуй сам »

Пример

Используйте CSS для стилизации кнопок (с эффектом наведения):





.кнопка {
граница: нет;
цвет: белый;
отступ: 16 пикселей 32 пикселя;
выравнивание текста: центр;
текстовое оформление: нет;
дисплей: встроенный блок;
размер шрифта: 16 пикселей;
поля: 4px 2px;
продолжительность перехода: 0.4с;
курсор: указатель;
}

.button1 {
цвет фона: белый;
цвет: черный;
граница: 2 пикселя твердый # 4CAF50;
}

.button1: hover {
background-color: # 4CAF50;
белый цвет;
}

.button2 {
background-color: white;
цвет: чернить;
граница: сплошная 2 пикселя # 008CBA;
}

. button2: наведение {
цвет фона: # 008CBA;
цвет: белый;
}





Попробуй сам »

Связанные страницы

Ссылка на HTML DOM: объект кнопки

Учебное пособие по CSS: стили кнопок


Настройки CSS по умолчанию

Нет.



ion-button: Документация по Ionic Framework API

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

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

Значение Детали
блок Кнопка на всю ширину с закругленными углами.
полный Кнопка во всю ширину с квадратными углами и без рамки слева или справа.

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

прозрачный
Значение Детали
Кнопка с прозрачным фоном, напоминающая плоскую кнопку.
контур Кнопка с прозрачным фоном и видимой рамкой.
цельный Кнопка с закрашенным фоном. Полезно для кнопок на панели инструментов.

Этот атрибут определяет размер кнопки.Установка этого атрибута изменит высоту и отступ кнопки.

Значение Детали
малый по умолчанию Кнопка с высотой и отступом по умолчанию. Полезно для кнопок в элементе.
большой Пуговица с увеличенной высотой и обивкой.

Как создать текстовые кнопки с помощью CSS?

В этой статье мы увидим, как создавать текстовые кнопки с помощью CSS.

Текст Кнопка — это кнопка, которая выглядит как текст, но действует как кнопка, если мы ее нажимаем. Текстовые кнопки отличаются от тегов привязки, даже если они могут выглядеть одинаково. Чтобы сначала создать текстовые кнопки, мы создаем простые кнопки в HTML с помощью тега кнопки. После создания кнопки мы применяем CSS и изменяем ее свойства, чтобы она выглядела как текстовая кнопка. Чтобы она выглядела как текстовая кнопка, мы удаляем ее границу и фон по умолчанию. Чтобы определить, что это кнопка, мы задаем цвет при наведении курсора, поэтому, когда мы наводим на нее курсор, он меняет свой цвет с прозрачного на зеленый.

Синтаксис:

 #textButton {
       фон: нет;
       граница: нет;
}
#textButton: hover {
       цвет фона: зеленый;
} 

Пример: Следующее демонстрирует вышеуказанный подход. Мы создали HTML-файл и создали кнопку с именем «GeeksforGeeks», используя тег кнопки с идентификатором «textButton».После этого мы создали тег стиля, в котором выбрали эту кнопку, используя ее идентификатор, и удалили ее свойства фона и границы, установив для них значение «Нет». Мы добавили цвет фона при наведении, чтобы пользователи могли идентифицировать нашу кнопку.

HTML

< html >

< body >

< > h3 GFG h3 >

< h2 > Текстовые кнопки с использованием CSS h2 >

< кнопка id = «textButton» >

GeeksforGeeks

кнопка >

style >

#textButton {

фон: нет;

граница: отсутствует;

}

#textButton: hover {

цвет фона: зеленый;

}

стиль >

корпус >

html >

Вывод:

текстовых кнопок с использованием CSS

Классы кнопок WordPress - WordPress.

com

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

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

3 передовых метода стилизации кнопок

Чтобы максимизировать маркетинговые результаты кнопок вашего веб-сайта, подумайте, как элементы дизайна кнопок влияют на ваш WordPress.com пользовательский интерфейс (UX).

1. Разборчивость

Маленькие кнопки с крошечным текстом трудно читать, и они вряд ли привлекут внимание посетителя. Обычно рекомендуется использовать крупный, разборчивый шрифт темного цвета.

2. Цвет

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

3. Форма

Определенная форма или граница для ваших кнопок может улучшить UX и видимость. CSS можно использовать для создания кнопок с квадратными или закругленными краями или для добавления границ кнопок.

Помните, кнопки сайта следует использовать экономно. Использование слишком большого количества кнопок на вашем сайте может сбить с толку посетителей. Как правило, оптимальным для UX является добавление одной основной кнопки с призывом к действию на страницу.

Настройка кнопок сайта с помощью CSS

Вы можете разблокировать возможность настройки CSS вашего сайта с помощью WordPress.com Премиум или Бизнес план. Чтобы начать создавать кнопки, перейдите на панель CSS Customizer вашего сайта.

Изображение предоставлено: WordPress.com Поддержка

1. Доступ к настройщику

  1. Щелкните Мой сайт
  2. Выбрать Дизайн
  3. Выбрать Настроить

2. Настройка кнопок сайта

Вам не нужно свободно владеть CSS, чтобы изменять размер, форму или цвет кнопок. В следующем руководстве объясняется, как стилизовать кнопки сайта с помощью CSS, добавив правила CSS в ваш WordPress.com настройщик сайта.

  1. Выберите CSS в меню настройки
  2. Удалить текст заполнителя

Если вы никогда раньше не редактировали CSS, вы увидите следующий код по умолчанию. Удалите это перед копированием и вставкой в ​​свой собственный CSS.

/ *
Добро пожаловать в Custom CSS!

Чтобы узнать, как это работает, см. Https://wp.me/PEmnE-Bt
* /

кредит изображения: WordPress.com Поддержка

3. Скопируйте и вставьте CSS

Добавьте правила CSS в панель CSS настройщика сайта.

4. Выберите «Сохранить и опубликовать»

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

5. Доступ к редакциям CSS

Последние 25 изменений CSS вашей темы доступны по ссылке CSS Revisions в правом верхнем углу панели CSS.Помните, что CSS зависит от темы, поэтому, если вы измените тему, ваш собственный стиль кнопки не будет сохранен. Однако вы можете повторно использовать предыдущие стили, щелкнув опцию CSS Revisions .

Основные стили кнопок CSS

CSS можно использовать для обширной настройки множества различных элементов кнопок сайта, в том числе:

  • Цвет фона - основной цвет кнопки, определяемый шестнадцатеричными цветовыми кодами.
  • Граница - дополнительная граница кнопки, измеряемая в пикселях.
  • Color - цвет текста в шестнадцатеричных кодах.
  • Padding - интервал текста в пикселях.
  • Text-align - выравнивание текста по центру, вправо или влево.
  • Font-size - размер шрифта на кнопке в пикселях.

Измените следующий фрагмент кода и скопируйте и вставьте его в настройщик WordPress.com.

mybutton {
background-color: # f5b041;
радиус границы: 10 пикселей;
цвет: #fdfefe;
отступ: 10 пикселей;
выравнивание текста: по центру;
font-size: 22px;
}

Настройка вашего WordPress.com сайт

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

Хотите вывести свой веб-сайт на новый уровень?

Зарегистрируйтесь на Официальный саммит роста WordPress.com, виртуальную конференцию, которая пройдет с 11 по 12 августа 2020 года.

Будьте готовы. Расти.

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

Введение в основы современных кнопок CSS

Обновление (9 июля 2016 г.): В эту статью добавлены теги

Код запуска

Выход

2. Установив свойство

text-align родительского тега div на center ( text-align: center )

В этом примере ниже мы используем `text-align` свойство center в теге

с классом (button-container-div), поэтому все внутри этого
будет автоматически выровнено по центру. .

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            выравнивание текста: центр;
            граница: сплошной коралл 1px;
            высота: 40vh;
            ширина: 50вв;
        }
    


    

Код запуска

Выход

3.Отцентрируйте кнопку CSS с помощью поля

auto (поле : auto )

В этом примере мы используем свойство `margin` auto. Margin auto перемещает div в центр экрана.

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            маржа: авто;
        }
    


    

Код запуска

4. Центральная кнопка CSS с фиксированным положением

В этом примере мы задаем поле 50% с левой стороны страницы, а затем мы берем положение : фиксированное , чтобы оно отрегулировало положение в центре тела.

  




    
     Кнопка выравнивания по центру 
    <стиль>
        кнопка {
           положение: фиксированное;
           осталось: 50%;
        }
    


    

Код запуска

4.Установив для свойства

display значение flex ( display: flex )

В этом примере мы используем `display`, flex свойство, ` justify-content` и `align-items` для родительского тега

с классом (button-container-div). Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  • Изгиб дисплея переместит его к центру по вертикали.
  • Justify-content перемещает кнопку в центр по горизонтали.
  • Центр выравнивания элементов сохраняет его в центре; в противном случае он будет начинаться с div и идти внизу div.
  




    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: гибкий;
            justify-content: center;
            align-items: center;
        }
    


    

Код запуска

Выход

 

3.Установив свойство

display на сетку (отображение : сетка )

В этом примере мы используем свойство сетки `display` в теге

с классом (button-container-div) . Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  


    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: сетка;
        }
        кнопка {
            цвет фона: малиновый;
            цвет: #fff;
            граница: сплошная 1px;
            отступ: 10 пикселей;
            ширина: 100 пикселей;
            наброски: нет;
            маржа: авто;
        }
    


    

Код запуска

Выход

Button API - Material-UI

Документация по API компонента Button React.Узнайте больше о реквизитах и ​​точках настройки CSS.

Import

  import Button from '@ material-ui / core / Button';

импортировать {Button} из '@ material-ui / core';  

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

Имя компонента

Имя MuiButton может использоваться для предоставления свойств по умолчанию или переопределений стиля на уровне темы.

Стойка

Название Тип По умолчанию Описание
детский узел Содержимое кнопки.
классы объект Переопределить или расширить стили, примененные к компоненту. См. CSS API ниже для получения более подробной информации.
цвет «по умолчанию»
| 'унаследовать'
| «первичный»
| 'вторичный'
'по умолчанию' Цвет компонента. Он поддерживает те цвета темы, которые имеют смысл для этого компонента.
компонент elementType 'пуговица' Компонент, используемый для корневого узла.Либо строка для использования HTML-элемента, либо компонента.
отключен булев ложь Если true , кнопка будет отключена.
отключить высоту булев ложь Если истинно , отметка не используется.
отключить FocusRipple булев ложь Если истинно , пульсация фокуса клавиатуры будет отключена.
отключить пульсацию булев Если истинно , эффект пульсации будет отключен.
⚠️ Без ряби нет стиля для: focus-visible по умолчанию. Обязательно выделите элемент, применив отдельные стили с focusVisibleClassName .
endIcon узел Элемент помещен после детей.
полная ширина булев ложь Если истинно , кнопка займет всю ширину своего контейнера.
href строка URL-адрес, на который следует ссылаться при нажатии кнопки. Если определено, элементы и будут использоваться в качестве корневого узла.
размер «большой»
| «средний»
| 'маленький'
'средний' Размер кнопки. small эквивалентен плотному стилю кнопок.
startIcon узел Элемент помещен перед детьми.
вариант «содержит»
| «изложил»
| 'текст'
'текст' Вариант использования.

Ссылка ref перенаправляется в корневой элемент.

Любые другие предоставленные свойства будут предоставлены корневому элементу (ButtonBase).

CSS

. .
Название правила Глобальный класс Описание
корень .Корень MuiButton Стили, примененные к корневому элементу.
этикетка .MuiButton-label Стили, примененные к элементу span, который обертывает дочерние элементы.
текст .MuiButton-text Стили, применяемые к корневому элементу, если variant = "text" .
текст Основной .MuiButton-textPrimary Стили, применяемые к корневому элементу, если option = "text" и color = "primary" .
текст вторичный .MuiButton-textSecondary Стили, применяемые к корневому элементу, если option = "text" и color = "secondary" .
выделено .MuiButton с контуром Стили, применяемые к корневому элементу, если option = "outlined" .
выделенное первичное .MuiButton-outlinedPrimary Стили, применяемые к корневому элементу, если option = "outlined" и color = "primary" .
выделено вторичное .MuiButton-outlined Secondary Стили, применяемые к корневому элементу, если option = "outlined" и color = "secondary" .
содержит .MuiButton-содержащий Стили, применяемые к корневому элементу, если option = "contains" .
Содержит Первичный .MuiButton-containPrimary Стили, применяемые к корневому элементу, если option = "содержал" и color = "primary" .
содержит вторичный .MuiButton -istedSecondary Стили, применяемые к корневому элементу, если option = "содержал" и color = "secondary" .
отключить высоту .MuiButton-disableElevation Стили, применяемые к корневому элементу, если disableElevation = {true} .
фокус Видимый .Mui-focusVisible Псевдокласс, применяемый к корневому элементу ButtonBase, если кнопка находится в фокусе клавиатуры.
отключен .Mui-отключен Псевдокласс, применяемый к корневому элементу, если disabled = {true} .
цвет Наследовать .MuiButton-colorInherit Стили, применяемые к корневому элементу, если color = "inherit" .
текстРазмер Маленький .MuiButton-textSizeSmall Стили, применяемые к корневому элементу, если size = "small" и variant = "text" .
текстРазмерБольшой .MuiButton-textSizeLarge Стили, применяемые к корневому элементу, если size = "large" и option = "text" .
очерченный Размер Малый .MuiButton-outlinedSizeSmall Стили, применяемые к корневому элементу, если size = "small" и вариант = "outlined" .
очерченный Размер Большой .MuiButton-outlinedSizeLarge Стили, применяемые к корневому элементу, если size = "large" и вариант = "outlined" .
содержится Размер Мелкий .MuiButton-containSizeSmall Стили, применяемые к корневому элементу, если size = "small" и вариант = "содержат" .
Содержит Размер Большой .MuiButton-containSizeLarge Стили, применяемые к корневому элементу, если size = "large" и вариант = "содержат" .
размер Малый .MuiButton-sizeSmall Стили, применяемые к корневому элементу, если size = "small" .
размерБольшой .MuiButton-sizeLarge Стили, применяемые к корневому элементу, если size = "large" .
полная ширина .MuiButton-fullWidth Стили, применяемые к корневому элементу, если fullWidth = {true} .
startIcon .MuiButton-startIcon Стили, применяемые к элементу startIcon, если он указан.
endIcon .MuiButton-endIcon Стили, применяемые к элементу endIcon, если он указан.
iconРазмер Маленький .MuiButton-iconSizeSmall Стили, применяемые к элементу значка, если он указан, и size = "small" .
icon Размер Средний .MuiButton-iconSizeMedium Стили, применяемые к элементу значка, если он указан, и size = "medium" .
iconРазмерБольшой .MuiButton-iconSizeLarge Стили, применяемые к элементу значка, если он указан, и size = "large" .

Вы можете переопределить стиль компонента благодаря одной из этих точек настройки:

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

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

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