<button>버튼 1</button>
<input type="button" value="버튼 2" />
<input type="reset" value="초기화" />
<input type="submit" value="제출" />
:where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  border-radius: 1em;
  padding: 0.5em 1em;
  color: white;
  font-weight: bold;
  background: royalblue;
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"]):where(:focus, :hover, :active) {
  background: blue;
}

/* button:focus,
button:hover,
button:active,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active {
  background: blue;
} */


/* Layout Style */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.