Vier Eckmarken

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

bracketcorner-markrectangleoutlineviewfinder

CSS

.btn-152 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .2s
}
.btn-152 span {
  position: relative;
  z-index: 1
}
.btn-152::before,.btn-152::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background: linear-gradient(#0f172a,#0f172a) top left/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) top left/2px 10px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/2px 10px no-repeat;
  opacity: 0;
  transition: opacity .2s,inset .2s
}
.btn-152::after {
  transform: scaleX(-1)
}
.btn-152:hover::before,.btn-152:hover::after {
  opacity: 1;
  inset: -3px
}
.btn-152:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 6px
}
.btn-152:active {
  background: #e2e8f0
}

HTML

<button class="btn-152"><span>Focus</span></button>

Prompt

Ein blasser #f8fafc Button mit 1px #e2e8f0 Rahmen, eckigen Ecken, #0f172a 14px semibold Text, 14px mal 26px Padding. Beim Hover blenden vier Sucher-Marken (10px mal 2px L-Zeichen, gebaut aus Gradient-Hintergründen auf zwei gespiegelten Pseudo-Elementen) außen herum ein und ziehen sich von 5px auf 3px Abstand zur Kante zusammen, wie eine Kamera, die den Fokus einrastet. Active #e2e8f0. Focus: 2px Outline mit 6px Offset, damit sie die Marken freilässt.

Vier Eckmarken

Gleiches Regal