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

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

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

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

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

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

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

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

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

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

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

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

:active — CSS | MDN

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

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

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

Примечание: В системах с много-кнопочными мышами, 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! Посмотрите на примеры ниже или посетите наши кнопки CSS руководство.

---

Поддержка браузера

Элемент
<кнопка>	Есть	Есть	Есть	Есть	Есть

---

Атрибуты

Атрибут	Значение	Описание
автофокус	автофокус	Указывает, что кнопка должна автоматически получать фокус при загрузке страницы.
отключен	отключен	Указывает, что кнопка должна быть отключена
форма	form_id	Указывает, какой форме кнопка принадлежит
форма действия	URL	Указывает, куда отправлять данные формы при отправке формы.Только для type = «submit»
форма	приложение / x-www-form-urlencoded multipart / form-data text / plain	Определяет, как данные формы должны кодироваться перед их отправкой на сервер. Только для type = «submit»
метод формы	получить пост	Определяет, как отправлять данные формы (какой HTTP-метод использовать). Только для type = «submit»
для новалидата	formnovalidate	Указывает, что данные формы не должны проверяться при отправке. Только для type = «submit»
форма цели	_blank _self _parent _top framename	Указывает, где отображать ответ после отправки формы. Только для type = «submit»
наименование	наименование	Задает имя для кнопки
тип	кнопка сброс отправить	Определяет тип кнопки
значение	текст	Задает начальное значение для кнопки

---

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

---

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

---

---

Другие примеры

Пример

Используйте CSS для стилизации кнопок:

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

. button1 {цвет фона: # 4CAF50;} / * Зеленый * /
.button2 {background-color: # 008CBA;} / * Синий * /

Зеленый
Синий

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

Пример

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

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

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

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

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

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

Green
Blue

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

---

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

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

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

---

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

Нет.

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

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

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

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

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

83.6.0″>

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

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

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

Как создать текстовые кнопки с помощью 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 г.): В эту статью добавлены теги , а не теги привязки, чтобы соответствовать современным рекомендациям по обеспечению доступности. Если вы работаете с кнопками, всегда придерживайтесь тега .

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

Прежде чем мы углубимся в различные способы мышления кнопок, нам нужно усилить некоторые основы кнопок CSS. Знание идеологической разницы между Flat UI и Material Design не имеет значения, если вы не знаете, какие компоненты CSS меняются.

Давайте быстро освежим в памяти основы кнопок CSS.

Основы кнопок CSS

Определение хорошей кнопки является субъективным для каждого веб-сайта, но существует несколько нетехнических стандартов:

1. Доступность - Это первостепенное значение.Кнопки должны быть легко доступны для людей с ограниченными возможностями и старых браузеров. Открытость Интернета прекрасна, не разрушайте ее с помощью ленивого CSS.
2. Простой текст - Делайте текст внутри кнопок коротким и простым. Пользователи должны сразу понимать назначение кнопки и то, куда она их приведет.

Почти все кнопки, которые вы видите в Интернете, будут использовать некоторые вариации изменения цвета, времени перевода, а также изменения границ и теней. Их можно использовать с помощью различных псевдоклассов CSS.Мы сосредоточимся на двух из них - : hover и : active . Псевдокласс : hover определяет, как должен изменяться CSS при наведении курсора мыши на объект. : активный чаще всего выполняется между моментом, когда пользователь нажимает кнопку мыши и отпускает ее.

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

Fundamental 1 - Цвет

Это наиболее частое изменение. Мы можем изменить цвет различных свойств, простейшими из которых являются свойства color , background-color и border . Прежде чем перейти к примерам, давайте сначала сосредоточимся на выборе цвета кнопок:

1. Сочетания цветов - Используйте цвета, которые дополняют друг друга.Colorhexa - отличный инструмент для определения того, какие цвета работают вместе. Если вы все еще ищете цвета, воспользуйтесь палитрой цветов Flat UI.
2. Подберите свою палитру - Обычно рекомендуется подбирать цветовую палитру, которую вы уже используете. Если вы все еще ищете цветовую палитру, обратите внимание на lolcolors.

Фундаментальный 2 - Тень

box-shadow позволяет добавить тень вокруг объекта. Можно добавить уникальные тени к каждой стороне, эта идея используется как в Flat UI, так и в Material Design.Чтобы узнать больше о box-shadow , ознакомьтесь с документацией по MDN box-shadow.

Фундаментальный 3 - Продолжительность перехода

transition-duration позволяет добавить шкалу времени к изменениям CSS. Кнопка без времени перехода мгновенно изменится на : hover CSS, что может оттолкнуть пользователя. Многие кнопки в этом руководстве используют время перевода, чтобы они выглядели естественно.

В следующем примере плавный переход стиля кнопки (более 0.5 секунд) на : наведите :

  .color-change {
  радиус границы: 5 пикселей;
  размер шрифта: 20 пикселей;
  отступ: 14 пикселей 80 пикселей;
  курсор: указатель;
  цвет: #fff;
  цвет фона: # 00A6FF;
  размер шрифта: 1,5 бэр;
  семейство шрифтов: 'Робото';
  font-weight: 100;
  граница: 1px solid #fff;
  box-shadow: 2px 2px 5px # AFE9FF;
  продолжительность перехода: 0,5 с;
  -webkit-transition-duration: 0.5 с;
  -moz-transition-duration: 0.5 с;
}

.color-change: hover {
  цвет: # 006398;
  граница: 1px solid # 006398;
  box-shadow: 2px 2px 20px # AFE9FF;
}  

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

См. Кнопку «Перо» с переходами от SitePoint (@SitePoint) на CodePen.

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

  продолжительность перехода: 0,5 с
-webkit-transition-duration: 0.5 с;
-moz-transition-duration: 0.5 с;  

Удаление стилей кнопок по умолчанию

Чтобы убрать стили браузера по умолчанию из элементов

, чтобы мы могли предоставить им собственные стили, мы включаем следующий CSS:

  кнопка.your-button-class {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
}  

Однако лучше применять это к классам элементов кнопок, а не к каждой кнопке по умолчанию.

Есть много сложных и интересных способов изменить то, как transition изменяет ваш CSS, в этом обновлении были рассмотрены только основы.

Три стиля кнопок

1 - Простой черно-белый

См. Примеры Pen Suit и Tie Button от SitePoint (@SitePoint) на CodePen.

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

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

  .suit_and_tie {
  белый цвет;
  размер шрифта: 20 пикселей;
  семейство шрифтов: helvetica;
  текстовое оформление: нет;
  граница: 2 пикселя сплошного белого цвета;
  радиус границы: 20 пикселей;
  Продолжительность перехода: .2с;
  -webkit-transition-duration: .2 с;
  -moz-transition-duration: .2 с;
  цвет фона: черный;
  отступ: 4px 30px;
}

.suit_and_tie: hover {
  черный цвет;
  цвет фона: белый;
  продолжительность перехода: 0,2 с;
  -webkit-transition-duration: .2 с;
  -moz-transition-duration: .2 с;
}  

В приведенных выше стилях вы увидите, что font и background-color изменяются во время переходного периода на .2s в обоих направлениях. Это действительно простой пример.Чтобы строить здесь, вы можете использовать цвета ваших любимых брендов в качестве вдохновения. Хороший способ найти такие фирменные цвета - это BrandColors.

2 - Плоские кнопки пользовательского интерфейса

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

Давайте усовершенствуем нашу кнопку по сравнению с предыдущей, добавив движение кнопки для имитации трехмерной кнопки.

См. Кнопки пользовательского интерфейса Pen Flat от SitePoint (@SitePoint) на CodePen.

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

  .turquoise {
  маржа справа: 10 пикселей;
  ширина: 100 пикселей;
  фон: # 1abc9c;
  нижняя граница: # 16a085 3px solid;
  граница слева: # 16a085 1px solid;
  граница справа: # 16a085 1px solid;
  радиус границы: 6 пикселей;
  выравнивание текста: центр;
  белый цвет;
  отступ: 10 пикселей;
  плыть налево;
  размер шрифта: 12 пикселей;
  font-weight: 800;
}

.бирюза: hover {
  непрозрачность: 0,8;
}

.turquoise: active {
  ширина: 100 пикселей;
  фон: # 18B495;
  нижняя граница: # 16a085 1px solid;
  граница слева: # 16a085 1px solid;
  граница справа: # 16a085 1px solid;
  радиус границы: 6 пикселей;
  выравнивание текста: центр;
  белый цвет;
  отступ: 10 пикселей;
  маржа сверху: 3 пикселя;
  плыть налево;
}  

У этой кнопки есть три состояния: обычное (без названия состояния), , : наведение и : активное .

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

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

Плоские кнопки пользовательского интерфейса используют : активно . Когда в нашем примере кнопка становится , происходят две вещи: активная .

1. : border-bottom изменяется с 3px на 1px . Это приводит к тому, что тень под кнопкой сжимается, и весь объект кнопки уменьшается на пару пикселей. Это простое изменение помогает пользователю почувствовать, будто он нажимает кнопку на странице.
2. Цвета меняются. Цвета фона темнеют, имитируя физическое движение от пользователя к странице. Опять же, это небольшое изменение напоминает пользователю, что он нажимает кнопку.

Кнопки с плоским пользовательским интерфейсом ценят простые и минимальные движения, которые рассказывают большие истории. Многие используют : border-bottom для создания неглубокого движения. Стоит отметить, что некоторые кнопки Flat UI вообще не двигаются, а только изменяют цвет.

3 - Материальный дизайн

Material Design - это дизайнерское мышление, которое продвигает карточки с информацией с помощью привлекающих внимание движений. Google разработал идею «Материального дизайна» и перечислил три основных принципа на главной странице Материального дизайна:

• Материал - метафора
• Полужирный, графический, преднамеренный
• Motion дает смысл

Чтобы лучше понять эти три принципа, давайте посмотрим, как работает Material Design.

См. Кнопки Pen Material Design Buttons With Polymer от SitePoint (@SitePoint) на CodePen.

Примечание редактора: этот пример не содержит тега

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

В этих кнопках используются две основные идеи - box-shadow и Polymer .

Polymer - это набор компонентов и инструментов, предназначенный для разработки веб-сайтов. Если вы знакомы с Bootstrap, Polymer очень похож. Обнаруженный выше мощный эффект пульсации добавляется одной строкой кода.

  

  
 ОТПРАВИТЬ 
    / * это линия, которая добавляет эффект ряби с помощью полимера * /
  

- это полимерный компонент.Импортируя Polymer в начале нашего HTML, мы получаем доступ к популярному фреймворку и его компонентам. Узнайте больше на домашней странице проекта «Полимер».

Теперь, когда мы понимаем, что такое полимер и откуда берется рябь (как это работает - это история другого дня), давайте поговорим о CSS, который помогает выполнять принципы материального дизайна, заставляя кнопки «всплывать».

  кузов {
  цвет фона: # f9f9f9;
  семейство шрифтов: RobotoDraft, Helvetica Neue;
}


.кнопка {
  дисплей: встроенный блок;
  положение: относительное;
  ширина: 120 пикселей;
  высота: 32 пикселя;
  высота строки: 32 пикселя;
  радиус границы: 2 пикселя;
  размер шрифта: 0.9em;
  цвет фона: #fff;
  цвет: # 646464;
  маржа: 20 пикселей 10 пикселей;
  переход: 0,2 с;
  задержка перехода: 0,2 с;
  box-shadow: 0 2px 5px 0 rgba (0, 0, 0, 0,26);
}

.button: active {
  box-shadow: 0 8px 17px 0 rgba (0, 0, 0, 0,2);
  задержка перехода: 0 с;
}


.button.grey {
  цвет фона: #eee;
}
.button.blue {
  цвет фона: # 4285f4;
  цвет: #fff;
}
.button.green {
  цвет фона: # 0f9d58;
  цвет: #fff;
}
.center {
  выравнивание текста: центр;
}  

Эти кнопки используют box-shadow для большей части своего дизайна.Давайте посмотрим, как box-shadow меняется и творит чудеса, удаляя все неизменные CSS:

  .button {
  переход: 0,2 с;
  задержка перехода: 0,2 с;
  box-shadow: 0 2px 5px 0 rgba (0, 0, 0, 0,26);
}
.button: active {
  задержка перехода: 0 с;
  box-shadow: 0 8px 17px 0 rgba (0, 0, 0, 0,2);
}  

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

Можно создавать кнопки материального дизайна, комбинируя Polymer с эффектами box-shadow .

• Материал - это метафора - используя box-shadow , мы можем имитировать трехмерные тени, как если бы они появлялись с объектами реального мира
• Жирный, графический, преднамеренный - это больше верно для ярко-синих и зеленых кнопок, и они полностью это выполняют.
• Движение обеспечивает смысл. - С помощью переходов Полимер и box-shadow мы можем создать много движения, когда пользователь нажимает кнопку.

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

Заключение

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

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

Центральная кнопка CSS

В этом руководстве объясняется, как центрировать кнопку CSS .

Центральная кнопка CSS

Основная цель CSS (каскадных таблиц стилей) - предоставить лучший стиль для веб-страницы HTML.Используя CSS, вы можете указать расположение всех элементов страницы. Вы можете выравнивать элементы как по горизонтали, так и по вертикали. Кнопка CSS должна быть выровнена по центру, если вы хотите, чтобы она располагалась по центру внутри div или в центре веб-страницы.

Вы можете выровнять кнопку CSS по центру, используя следующий метод:

1. Поместив свойство text-align тега body в центр (text-align: center)

В этом примере мы используем свойство `text-align` center в теге , поэтому все внутри тега будет автоматически выровнено по центру .

  


    
    <стиль>
        тело {
            выравнивание текста: центр;
        }
    


    

Наведите меня!

Код запуска

Выход

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

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

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

No related posts.