CodePen Embed - css-where-1

<button>버튼 1</button>
<button>버튼 2</button>

button {
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  border-radius: 1em;
  padding: 0.5em 1em;
  color: white;
  font-weight: bold;
  background: royalblue;
}

button:where(:focus, :hover, :active) {
  background: blue;
}

/* button:focus, 
button:hover,
button:active {
  background: blue;
} */


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

This Pen is owned by Dale Seo on CodePen.

See more by @daleseo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.