<button>:

<button class="favorite styled" type="button">Add to favorites</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled:hover {
  background-color: rgba(255, 0, 0, 1);
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.

autofocus

, . autofocus .

autocomplete

This attribute on a <button> is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting autocomplete="off" disables this feature; see Firefox bug 654072.

disabled

, .

Firefox, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

form

<form> (" "). <form> id . form <form> <form> .

form <form> , <form> .

formaction

<button> , URL. , action . .

formenctype

<button> , formenctype . .

• application/x-www-form-urlencoded: .
• multipart/form-data: type file <input> .
• text/plain: . .

, enctype .

formmethod

<button> , formmethod HTTP . .

• post: HTTP . , .
• get: action URL ? . , .

, method .

formnovalidate

<button> , formnovalidate . , novalidate .

formtarget

<button> , formtarget . (, , <iframe>) . , target . .

• _self: . .
• _blank: . , .
• _parent: . _self .
• _top: ( , ) . _self .

name

. , value .

type

. .

• submit: . , .
• reset: <input type="reset">, .
• button: . .

value

. , value .

<button> <input> . <input> value , <button> HTML (<em>, **, <img>) ::after ::before .

type button . , ( ) .

<button name="button"></button>

. . .

, <button> .

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>

, CSS , .

, . , .

• What is an accessible name? | The Paciello Group
• MDN Understanding WCAG, Guideline 4.1 explanations
• Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

. , . 44x44 CSS .

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

. .

margin CSS .

• Hand tremors and the giant-button-problem - Axess Lab

Firefox

Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <a href="/ko/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>.

If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

<button> . <input> type="button" type="submit" .