Eckpunkt-Marker

Eckpunkt-Marker: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein cremefarbener #fff7ed Button mit 1px gestricheltem #fdba74 Rahmen, 6px Radius, braunem #7c2d12 14px semibold Text, 13px mal 26px Padding. Beim Hover wird der Rahmen durchgezogen orange #f97316 und zwei 7px große orange Punkte ploppen (federnde Skalierung von 0) an der Ecke oben links und unten rechts heraus, wie Pins. Active #ffedd5. Focus: 2px orange Outline mit 5px Offset.

Eckpunkt-Marker

Gleiches Regal