Стиль html кнопки: Делаем стильные кнопки | htmlbook.ru

— HTML | MDN

HTML-элемент <button> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

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

autofocus HTML5

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

autocomplete

Использование данного атрибута на элементе <button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.

disabled

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от <fieldset>; если отсутствует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete.

form HTML5

Атрибут form позволяет указать элемент <form>, с которым связана кнопка. Данный атрибут должен хранить значение id элемента <form>. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом <form>, если последний существует.

Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента <form>.

formaction HTML5

Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут action у формы-родителя.

formenctype HTML5

Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:

• application/x-www-form-urlencoded: значение по умолчанию, если атрибут не указан.
• multipart/form-data: следует использовать это значение, если форма содержит элемент <input> со значением атрибута type file.
• text/plain

Если этот атрибут определён, он переопределяет атрибут enctype у формы-родителя.

formmethod HTML5

Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

• post: данные формы включаются в тело сообщения и отправляются на сервер.
• get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделённых знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.

Если этот атрибут определён, он переопределяет атрибут method у формы-родителя.

formnovalidate HTML5

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

Если этот атрибут определён, он переопределяет атрибут novalidate у формы-родителя.

formtarget HTML5

Если button имеет тип submit, этот атрибут является именем или ключевым словом,

указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

• _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
• _blank: Load the response into a new unnamed browsing context.
• _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

name

The name of the button, which is submitted with the form data.

type

The type of the button. Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
• reset: The button resets all the controls to their initial values.
• button: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
• menu: The button opens a popup menu defined via its designated <menu> element.

value

The initial value of the button.

<button name="button">Тык!</button>

Clicking and focus

Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS. The results for <input> of type="button" and type="submit" are the same.

BCD tables only load in the browser

Учебник HTML 5. Статья «Тег кнопка»

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).

Атрибут type тега задает тип, используемой кнопки:

Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Тег <button></title>
	</head>
	<body>
		<button type = "button" name = "button1" style = "width: 80px; height:50px;">
			<b>Кнопка 1</b>
		</button><br><br>
		<button type = "button" name = "button2" style = "width: 80px; height:50px">
			<img src = "../../images/top2.png" alt = "up" width = "40" height = "40">
		</button><br><br>
		<button type = "button" name = "button3" style = "width: 80px; height:50px;">
			<i>Кнопка 3</i>
		</button><br><br>
	</body>
</html>

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

• Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
• Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
• Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

Результат нашего примера:

Рис. 41 Пример использования тега <button> (кнопкa в HTML).

Отключение кнопки

Атрибут disabled (HTML тега <button>) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута disabled HTML тега <button></title>
	</head>
	<body>
		<button type = "button">Элемент активен</button> <!-- элемент используется в качестве кнопки -->
		<button type = "button" disabled>Элемент отключен</button> <!-- кнопка отключена -->
	</body>
</html>

В данном примере мы указали для второго элемента <button> с типом кнопка (type = «button») атрибут disabled, который отключает элемент и не дает нам кликнуть по кнопке.

Рис. 41а Пример отключения кнопки (предварительное отключение элемента).

Автофокус на кнопке

В HTML 5 был добавлен такой логический атрибут как autofocus (HTML тега <button>) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.

Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута autofocus HTML тега <button></title>
	</head>
	<body>
		<form>
			<button name = "button" type = "button">Кнопка</button>
			<button name = "focusButton" type = "button"><b>Жми!!!</b></button>
		</form>
	</body>
</html>

В данном примере мы создали две кнопки (HTML тег <button>), атрибутом name указали им уникальные имена. Для второй кнопки атрибутом autofocus задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).

Результат нашего примера:

Рис. 41б Пример использования атрибута autofocus (фокус на кнопке).

Браузер Internet Explorer поддерживает атрибут autofocus только с десятой версии.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два png изображения) в любую папку на вашем жестком диске:
• Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 24.

Для выполнения задания Вам потребуются знания из статьи «HTML Цвета». Если вы пропустили её, то вернитесь для её изучения.

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

Кнопки HTML

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Кнопки HTML</title>
</head>
<body>
<p><button>Кнопка</button></p>
</body>
</html>

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

Кнопка

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

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

Результат:

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

Оформление кнопки

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

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

Код:

<button>Кнопка</button>

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

Кнопка

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

1. background: #fdeaa8; — цвет кнопки;

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

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

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

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

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

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

Код:

<button><img src="images/s20.png">Кнопка</button>

Результат:

Кнопка

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

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

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

Код:

<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Результат:

Кнопка

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

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

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

onclick=»location.href=’https://starper55plys.ru/’;».

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

<button title="Страница 23"border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

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

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

1 2 3 4

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

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

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

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


<a href="*">Кнопка</a>


Кнопка

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

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

Перемена

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

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

CSS: создание кнопки | СХОСТ блог

О том, как создать кнопку в HTML, мы уже рассказывали. Теперь же рассмотрим, как это сделать при помощи таблицы стилей.

Для создания простой кнопки используйте тег <input>:

<input type=»button» value=»Кнопка»>

Теперь добавьте таблицу стилей:

.button {

height:60px;

border-color:#000080 #6A5ACD #8470FF #0000FF;

border-style:solid;

border-width:5px;

background:#4682B4;

cursor:pointer;

}

Кнопка в браузере:

Рассмотрим таблицу стилей, в которой прописаны эффекты наведения на кнопку, где :hover отвечает за отображение кнопки при наведении, :active 一 при нажатии, а :focus 一 после нажатия:

.button:hover {

border-color:#7CFC00 #7CFC00 #7CFC00 #7CFC00;

border-style:solid;

border-width:5px;

background:#FFFF99;

}

.button:focus {

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

}

.button:active {

background:#228B22;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:5px;

}

Кнопка в браузере:

Как написать и запустить HTML на компьютере? — Блог HTML Academy

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

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

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Сайт начинающего верстальщика</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        На главную
      </nav>
    </header>
    <main>
      <article>
        День первый. Как я забыл покормить кота

        Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.

        Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
      </article>
      <aside>
        Здесь могла быть ваша реклама.
      </aside>
    </main>
    <footer>
      Подвал сайта
    </footer>
  </body>
</html>

style.css

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.

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

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Внеклассное чтение:

Кнопки | WebReference

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами — с помощью элемента <input> или <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
</head>
<body>
<form>
<p><input type=»button» value=» Нажми меня нежно «></p>
</form>
</body>
</html>

Пробелы в надписи на кнопке, в отличие от обычного текста в HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

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

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то элемент <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

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

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action элемента <form>. Эта программа, называемая еще обработчиком формы, получает данные введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
</head>
<body>
<form>
<p><input name=»login»></p>
<p><input type=»submit»></p>
</form>
</body>
</html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер самостоятельно добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
</head>
<body>
<form>
<p><input value=»Введите текст»></p>
<p><input type=»submit» value=»Отправить»>
<input type=»reset» value=»Очистить»></p>
</form>
</body>
</html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке не писать, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

Цветные кнопки

Вид и цвет кнопок зависит от операционной системы и браузера. Тем не менее можно изменить цвет кнопок по своему усмотрению, воспользовавшись стилями. Для этого требуется только добавить к кнопке свойство background, как показано в примере 5. Дополнительно можно поменять цвет текста и другие параметры. Помните про одну особенность — как только вы меняете цвет фона, кнопка становится приподнятой, поэтому для «плоских» кнопок надо добавить ещё рамку, пусть даже прозрачную.

Пример 5. Вид кнопок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
<style>
.btn {
background: #5d8f76; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 7px 12px; /* Поля */
margin-bottom: 1em; /* Отступ снизу */
}
.btn:hover {
background: #1e6550; /* Цвет фона при наведении курсора */
}
.btn-flat {
border: 1px transparent; /* Прозрачная рамка */
}
.btn-round {
border-radius: 20px; /* Радиус скругления */
}
</style>
</head>
<body>
<form>
<p><input type=»button» value=»Исходная кнопка»>
<input type=»button» value=»Цветная кнопка»>
<input type=»button» value=»Плоская кнопка»>
<input type=»button» value=»Кнопка со скруглёнными уголками»></p>
</form>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Изменение вида кнопок

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Красивые кнопки CSS + 3 стиля и 6 цветов

Красивые кнопки css – это то, что нужно практически любому сайту. Эта мини-коллекция состоит из 43 кнопок, 3 разных стиля и 6 разных цветов. Ко всему этому, будет применено использование использование шрифта иконок. CSS создание кнопки имеет важное значение, поэтому предлагаю прочитать этот урок и посмотреть демо примеры по ссылке выше. Также обязательно посмотрите 3D кнопки для сайта от классного дизайнера Орман Кларка.

Шрифт и кнопки

Я использую Даниэль Брюса шрифт WebFont для иконок на кнопке, и мы конечно не используем все доступные в шрифте изображения, но эти 43 самые распространенные. Кроме них, также будет создано 3 разных стиля: вид 3D, прямоугольные и овальные. Также есть 6 цветов: оранжевый, пурпурный, голубой, красный, черный и зеленый. Вот некоторые из них:

Эти кнопки имеют 3 вида внешнего состояния: обычный, при наведении (hover) и активации (active).

Особенности

Вот некоторые преимущества использования этого набора кнопок:

• Нет изображения, все кнопки выведены с помощью CSS и шрифта;
• Использование анимации при изменении состояния кнопки;
• Гибкая настройка, Вы можете выбрать или даже изменить размер кнопки, её стилб;
• Любой элемент может быть применен (a, button, span, div, input и т.д.).

Использование кнопок

Подключите файл стилей pictogram-button.css и загрузите папку font/ в нужное место. Есть два элемента, которые должны присутствовать – первый любой элемент в качестве обертки, а второй тег span.

Структура кнопки: первое, это стиль – 3D(button-bever), прямоугольник (button) или овальная кнопка (button-rounded). Далее после этого, идет цвет. Для тега span задается иконка через подключенный нами раннее шрифт. Вот примерная схема структуры кноппи:

На этом пока что все. Скачивайте исходные файлы, и пользуйтесь. Спасибо, что дочитали до конца!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com/2012/05/css3-pictogram-button/
Перевел: Владислав Бондаренко

html — Стилизация кнопки input type = «file»

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

Так выглядит элемент управления загрузкой файлов в Firefox, Chrome и Edge с использованием приведенного ниже CSS. Это очень простой чистый дизайн.Вы можете изменить его так, чтобы он выглядел так, как вам нравится:

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

  <стиль>
/ * Примечание: этот CSS стилизует все экземпляры
    на вашем веб-сайте. * /
input [type = "file"],
input [type = "file"]: посещено,
input [type = "file"]: наведите указатель мыши,
input [type = "file"]: фокус,
input [type = "file"]: active {
    маржа: 0;
    заполнение: 0em 0em;
    заполнение: 0rem 0rem;
    переполнение: скрыто; / * длинные имена файлов переполняются, поэтому просто скройте конец * /
    фон: #ffffff;
    радиус границы:.2em;
    border-radius: .2rem;
    наброски: нет;
    граница: 2px сплошная #bbb;
    курсор: указатель;
    -webkit-appearance: текстовое поле;
    -moz-appearance: текстовое поле;
}

input [type = "file"]: hover {
    фон: # f9f9ff; / * Я использую голубой для обозначения взаимодействия * /
    граница: 2px solid # 999;
}

input [type = "file"]: посещено,
input [type = "file"]: фокус,
input [type = "file"]: active {
    фон: #fff; / * По умолчанию возвращается к белому цвету при фокусировке. * /
    граница: 2px solid # 999;
}

/ * Примечание: Firefox помечает поле имени файла как ввод * только для чтения *.Итак, этот селектор атрибутов был добавлен ниже. Примечание. Эти селекторы в IE слишком популярны, поэтому их нужно отделить от тех же стилей, что и выше. * /
input [type = "file"]: отключено,
input [type = "file"]: только для чтения {
    маржа: 0;
    заполнение: 0em 0em;
    заполнение: 0rem 0rem;
    переполнение: скрыто; / * длинные имена файлов переполняются, поэтому просто скройте конец * /
    фон: #ffffff;
    радиус границы: .2em;
    border-radius: .2rem;
    наброски: нет;
    граница: 2px сплошная #bbb;
    курсор: указатель;
    -webkit-appearance: текстовое поле;
    -moz-appearance: текстовое поле;
}

input [type = "file"]: disabled: hover,
input [type = "file"]: только для чтения: hover {
    фон: # f9f9ff; / * Я использую голубой для обозначения взаимодействия * /
    граница: 2px solid # 999;
}

input [type = "file"]: disabled: посещено,
input [type = "file"]: disabled: focus,
input [type = "file"]: disabled: active,
input [type = "file"]: только для чтения: посещено,
input [type = "file"]: только для чтения: фокус,
input [type = "file"]: только для чтения: active {
    фон: #fff; / * По умолчанию возвращается к белому цвету при фокусировке.* /
    граница: 2px solid # 999;
}

/ * IE UPLOAD BUTTON STYLE: Это пытается изменить стиль кнопки загрузки файла в IE. Имейте в виду, что IE дает вам ограниченный контроль над дизайном, но, по крайней мере, вы можете настроить его кнопку загрузки. * /
:: - ms-browse {/ * IE * /
    дисплей: встроенный блок;
    маржа: 0;
    заполнение: .2em .5em;
    набивка: .2rem .5rem;
    выравнивание текста: центр;
    наброски: нет;
    граница: нет;
    фон: #fff;
    белое пространство: nowrap;
    курсор: указатель;
}
/ * СТИЛЬ КНОПКИ ЗАГРУЗКИ FIREFOX * /
:: кнопка-селектор-файла {/ * firefox * /
    дисплей: встроенный блок;
    запас: 0рем 1рем 0рем 0рем;
    обивка:.18em .5em;
    набивка: 0,18 бэр. 5 бэр;
    -webkit-appearance: button;
    выравнивание текста: центр;
    border-radius: .1rem 0rem 0rem .1rem;
    наброски: нет;
    граница: нет;
    граница справа: сплошная 2px #bbb;
    фон: #eee;
    белое пространство: nowrap;
    курсор: указатель;
}
/ * СТИЛЬ КНОПКИ ЗАГРУЗКИ ХРОМИРОВАНИЯ И КРАЯ * /
:: - webkit-file-upload-button {/ * хром и край * /
    дисплей: встроенный блок;
    запас: 0рем 1рем 0рем 0рем;
    заполнение: .19em .5em;
    набивка: .19rem .5rem;
    -webkit-appearance: button;
    выравнивание текста: центр;
    радиус границы:.1рем 0рем 0рем .1рем;
    наброски: нет;
    граница: нет;
    граница справа: сплошная 2px #bbb;
    фон: #eee;
    белое пространство: nowrap;
    курсор: указатель;
}

  

Примечание. Вы можете протестировать его в более старых версиях Firefox, Chrome, Edge и IE.

ссылок для стилизации в стильные кнопки | Учебник CSS

Ссылки используются для связывания связанных веб-страниц. В HTML тег привязки используется для создания гиперссылок.Мы уже научились стилизовать ссылку в зависимости от ее состояния, а именно: зависает , ссылка , посетила и активна .

В этом руководстве мы узнаем, как сделать ссылки похожими на прямоугольные кнопки, точно так же, как мы видим кнопки «Отправить» в формах, кнопки «Далее» и «Назад» в конце этого руководства, гиперссылку «Живой пример» и т. Д.

Если у нас есть два класса стилей с разными правилами стилей, мы можем добавить их оба вместе в один тег.Вот clickme class,

CSS:

  .clickme {
    цвет фона: #EEEEEE;
    отступ: 8 пикселей 20 пикселей;
    текстовое оформление: нет;
    font-weight: жирный;
    радиус границы: 5 пикселей;
    курсор: указатель;
}  

Выход:

clickme — это класс стиля, который обеспечивает некоторые базовые стили для ссылки, такие как заполнение, удаление подчеркивания и т. Д., Чтобы она выглядела как простая старая кнопка.Но да, основная задача по преобразованию ссылки в кнопку выполнена.

Живой пример →

Теперь мы добавим больше классов стилей поверх базового класса clickme , чтобы создавать красочные кнопки.

Красная кнопка → . Опасность класс

  .danger {
    цвет фона: # FF0040;
    цвет: #FFFFFF;
}

.danger: hover {
    цвет фона: # EB003B;
    цвет: #FFFFFF;
}  

HTML:

  

     class  ="  clickme dangerous  "> Тесты 
 

Выход:

Посмотрите комбинированный код вживую на Web Playground и даже попробуйте изменить несколько свойств CSS.

Живой пример →

Финал! Полный набор стильных кнопок CSS

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

Вы можете изменить цвета в соответствии с темой вашего веб-сайта или даже добавить к нему дополнительные классы цветов. Теперь перейдите на Web Playground , чтобы увидеть полный код в действии.

Выход:

Живой пример →

Надеемся, вам понравилось это упражнение. И потренируйтесь на нашей живой веб-площадке (ссылка) и поделитесь с нами своими проектами стиля, сделав снимок результатов на нашей странице в Facebook. Ага!

Вы должны стилизовать неправильное состояние кнопки

Допустим, вы хотите создать эффект щелчка на кнопке HTML.Первая идея, которая приходит в голову многим, - это сделать что-то, что воспроизводит ощущение звука, издаваемого настоящей кнопкой. Вот простой импульсный эффект:

Кнопка с импульсным эффектом при щелчке

Чтобы создать эффект кнопки, в HTML / CSS, у вас есть только три состояния на выбор :

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

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

Это то, что произойдет в нашем случае, если мы используем : active :

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

Для прохождения всей анимации этого импульсного эффекта требуется 300 мс. Щелчок мыши длится от ≈15 мс (игровая мышь) до 200+ мс (трекпад ноутбука).

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

Есть два способа добиться этого эффекта. Первый - запускает эффект щелчка при отпускании кнопки мыши . Для этого вам нужно найти состояние : not (: active) .

При использовании этого состояния анимация начнется, когда исчезнет состояние : active , и не будет ограничений на продолжительность перехода!

Но есть еще одна вещь: он должен анимировать только в одну сторону .Вы должны поместить свойство transition для этого эффекта под селектор : not (: active) . Если вы этого не сделаете, переход будет пытаться перемещаться вперед и назад и приведет к странному эффекту или просто к отсутствию эффекта.

Для этого эффекта я стилизовал псевдоэлемент : до . Вот соответствующая часть кода:

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

Теперь вы можете раскрыть свои лучшие переходы и создать сумасшедшие эффекты щелчка, которые не прекращаются случайно! Вот еще один пример, который длится целую секунду:

Другой пример эффекта щелчка, использующий этот метод.

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

Этот метод очень хорошо работает с псевдоэлементами , и вы должны получить несколько часов веселья, создавая с его помощью странные вещи (я сделал). Если вам нужно более двух элементов, просто поместите div внутри тега кнопки.

Пример использования div внутри кнопки

Что нужно помнить для создания красивых эффектов щелчка с помощью этого метода:

• Вы должны настроить селектор : not (: active) так, чтобы анимация начиналась в конце нажмите .
• Свойство перехода для вашего эффекта также необходимо установить в селекторе : not (: active) , так что переход идет только в одну сторону .
• Он использует только переходы , потому что ключевые кадры управляют своими собственными временными шкалами.
• Использование псевдоэлементов или внутренних тегов div позволяет создавать эффекты вне кнопки.

Удачи анимации!

классов кнопок WordPress - WordPress.com

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

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

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

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

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

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

2. Цвет

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

3. Форма

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

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

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

Вы можете разблокировать возможность настраивать CSS своего сайта с тарифным планом WordPress.com Premium или Business. Чтобы начать создавать кнопки, перейдите на панель 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 можно использовать для обширной настройки множества различных элементов кнопок сайта, в том числе:

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

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

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

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

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

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

Зарегистрируйтесь на официальном сайте WordPress.com Growth Summit, виртуальная конференция, которая состоится 11 - 12 августа 2020 г.

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

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

Стиль наведения, фокуса и активного состояния по-разному

16 октября 2019

Я стилизовал : hover , : focus и : active состояний одинаково в течение многих лет. Не могу вспомнить, когда я начала так укладывать.Вот код, который я всегда использую:

  // Не лучший подход. Я объясню почему в этой статье
.selector {
  &: навести,
  &: фокус,
  &: active {
    // Стили здесь
  }
}
  

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

Наведение, фокус и активное состояние должны иметь разные стили.

Причина проста: это разные государства!

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

Начнем с : наведите курсор на .

Стилизация состояний при наведении

: hover срабатывает, когда пользователь наводит курсор мыши на элемент.

Состояния наведения обычно представлены изменением цвета фона (и / или цвета ) . Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}
  

Стилизация состояний фокуса

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

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

Фокусируемые элементы:

1. Ссылки ( )
2. Кнопки ( )
3. Элементы формы ( input , textarea , и т. Д.)
4. Элементы с tabindex

Вот несколько важных моментов, на которые следует обратить внимание:

1. Пользователи не могут перейти к элементу с tabindex = "- 1" , но они могут щелкнуть по нему.Щелчок вызывает фокусировку.
2. В Safari и Firefox (Mac) щелчки не фокусируются на элементе . Больше информации здесь.
3. Когда вы щелкаете ссылку ( ), фокус остается на ссылке, пока вы не уберете палец с мыши. Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

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

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

Стиль фокуса по умолчанию в большинстве случаев подходит. Если вы хотите создать свой собственный фокус, подумайте об этих четырех вещах:

1. Добавление контура
2. Создание анимации с движением
3. Изменение цвета фона
4. Изменение цвета

Поскольку background-color и color изменения часто сопровождают : hover , имеет смысл, что контуров или анимаций должны сопровождать : focus .

Вы можете использовать комбинацию свойств outline , border и box-shadow для создания приятных стилей фокуса. Я рассказываю, как это сделать, в разделе «Создание собственного стиля фокуса».

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}

button: focus {
  наброски: нет;
  box-shadow: 0 0 0 3px lightskyblue;
}
  

Стилизация активных состояний

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

Этот отзыв полезен и для веб-сайтов. Вы можете стилизовать момент «нажатия кнопки» с : активно . : активный триггер срабатывает при взаимодействии с элементом . Здесь взаимодействие означает:

1. Удерживая левую кнопку мыши на элементе (даже на несфокусируемом)
2. Удерживая нажатой клавишу пробела (на кнопках)

  кнопка: активна {
  цвет фона: # 333;
  цвет границы: # 333;
  цвет: #eee;
}
  

Две странные вещи, на которые следует обратить внимание:

1. Удерживая нажатой клавишу «Пробел», активирует : активен на кнопках, а удерживание клавиши Enter - нет.
2. Ввести триггерные ссылки, но не создать активное состояние. Пробел вообще не запускает ссылки.

Стили по умолчанию для ссылок

Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.

Связь между активным и фокусным

Когда вы удерживаете левую кнопку мыши на фокусируемом элементе, вы запускаете активное состояние . Вы также одновременно запускаете состояние фокуса .

Когда вы отпускаете левую кнопку мыши, фокус остается на элементе

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

Для ссылок:

1. Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac)
2. Когда вы отпускаете левую кнопку мыши: : фокус остается на ссылке (если href ссылки не совпадает с id на той же странице).В Safari фокус снова возвращается к .

Для кнопок:

1. Когда вы удерживаете левую кнопку мыши: триггеры : активные и : фокус состояния только в Chrome. Не запускает : сфокусируйте вообще в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

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

  document.addEventListener ('щелчок', событие => {
  if (event.target.matches ('button')) {
    event.target.focus ()
  }
})
  

После получения этого кода поведение кнопок при нажатии становится:

1. Когда вы удерживаете левую кнопку мыши: запускает : активен во всех браузерах. Триггеры : сфокусируйте только на Chrome.
2. Когда вы отпускаете левую кнопку мыши: триггеры : фокус на Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.

Поведение кнопки в Safari после добавления фрагмента кода JavaScript выше.

Теперь вы знаете о состояниях наведения, фокуса и активных состояний, я хочу поговорить о стилизации всех трех.

Волшебное сочетание

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

 . Элемент: hover,
.element: active {
  / * Изменить цвет фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  

Для пользователей мыши:

1. Когда пользователь наводит курсор на элемент, изменяется background-color (и / или color ).Они получают обратную связь.
2. Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.

Для пользователей клавиатуры:

1. Когда пользователь входит в элемент, отображается контур фокуса. Они получают обратную связь.
2. Когда они взаимодействуют с элементом, изменяется background-color (и / или color ). Они получают обратную связь.

Лучшее из обоих миров!

1. Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
2. Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.

Немагическая (но может быть лучше) комбинация

Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.

Для Safari и Firefox (Mac) происходит следующее:

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

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

Но если вы думаете, что аффорданса недостаточно, вам нужно стилизовать : hover , : focus и : active отдельно.

  .element: hover {
  / * Изменить цвет фона / текста * /
}

.element: active {
  / * Еще одно изменение цвета фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  

Поведение кнопки в Safari, если вы стилизовали все три состояния.

Вот и все! Надеюсь, вы узнали что-то сегодня!

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

Настройка внешнего вида радиокнопки с помощью CSS

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

Но что, если вы хотите настроить внешний вид и вместо того, чтобы показывать обычные переключатели, вам нужны такие кнопки, как эта?

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

Прежде всего, вы начинаете с того, что скрываете сами круглые переключатели - мы просто стилизуем ярлыки. Мы можем выбрать их, используя input [type = "radio"] .Первоначально я скрывал это, установив display: none , но, как отмечает Патрик Кедровски в комментариях, это будет означать, что они не фокусируются и по ним невозможно перемещаться с клавиатуры. Поэтому вместо этого мы делаем его невидимым со следующими настройками:

  .radio-toolbar input [type = "radio"] {
  непрозрачность: 0;
  положение: фиксированное;
  ширина: 0;
}
  

Затем мы устанавливаем ярлыки, чтобы они выглядели так, как мы хотим, по умолчанию, когда они не выбраны:

  .radio-toolbar label {
    дисплей: встроенный блок;
    цвет фона: #ddd;
    отступ: 10 пикселей 20 пикселей;
    семейство шрифтов: без засечек, Arial;
    размер шрифта: 16 пикселей;
    граница: 2px solid # 444;
    радиус границы: 4 пикселя;
}
  

Теперь мы должны стилизовать выбранный объект по-другому.Именно здесь происходит настоящая магия CSS - нам нужно использовать селектор : checked и селектор «смежный брат» (знак +). Таким образом, это правило CSS применяется к любой метке, которая следует сразу за отмеченным переключателем.

  .radio-toolbar input [type = "radio"]: checked + label {
    цвет фона: #bfb;
    цвет границы: # 4c4;
}
  

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

  .radio-toolbar input [type = "radio"]: focus + label {
    граница: 2px пунктирная # 444;
}
  

Вот как выглядит сфокусированный. Это позволяет вам использовать стрелки влево и вправо для изменения выбора:

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

 .ярлык радио-панели инструментов: hover {
  цвет фона: #dfd;
}
  

Вот полный пример:

Руководство по стилю HTML | GitLab

См. Также нашу страницу специальных возможностей.

Семантические элементы


Семантические элементы - это теги HTML, которые
придают семантическое (а не презентационное) значение содержащимся в них данным. Например:

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

  

  

    
    Просто зайдите в свои  Настройки , чтобы поздороваться с миром.
  
  
 ... 



<раздел>
  

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