Puntos en las esquinas

Puntos en las esquinas: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

bracketcorner-markroundeddotsoutline

CSS

.btn-154 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  transition: border-color .2s,background .2s
}
.btn-154::before,.btn-154::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f97316;
  transform: scale(0);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1)
}
.btn-154::before {
  top: -4px;
  left: -4px;
  box-shadow: 0 0 0 0 #f97316
}
.btn-154::after {
  bottom: -4px;
  right: -4px
}
.btn-154:hover {
  border-style: solid;
  border-color: #f97316
}
.btn-154:hover::before,.btn-154:hover::after {
  transform: scale(1)
}
.btn-154:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 5px
}
.btn-154:active {
  background: #ffedd5
}

HTML

<button class="btn-154">Pin</button>

Prompt

Un botón crema #fff7ed con borde discontinuo 1px #fdba74, radio 6px, texto marrón #7c2d12 14px semibold, padding 13px por 26px. En hover el borde pasa a naranja sólido #f97316 y dos puntos naranjas de 7px saltan hacia fuera (escala con rebote desde 0) en las esquinas superior izquierda e inferior derecha, como chinchetas. Active #ffedd5. Focus con outline naranja de 2px y offset 5px.

Puntos en las esquinas

Misma estantería