Design for AISpitzklammern-Pfeil
Spitzklammern-Pfeil: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-155 {
position: relative;
font: 600 14px/1 system-ui,sans-serif;
color: #0f172a;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 4px;
padding: 12px 34px;
cursor: pointer;
transition: border-color .2s,padding .2s
}
.btn-155::before,.btn-155::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
font: 700 14px/1 ui-monospace,Menlo,monospace;
color: #94a3b8;
transition: color .2s,left .2s,right .2s
}
.btn-155::before {
content: "<";
left: 12px
}
.btn-155::after {
content: "/>";
right: 12px
}
.btn-155:hover {
border-color: #0f172a;
padding: 12px 38px
}
.btn-155:hover::before {
color: #0f172a;
left: 10px
}
.btn-155:hover::after {
color: #0f172a;
right: 10px
}
.btn-155:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 3px
}
.btn-155:active {
background: #f1f5f9
}
HTML
<button class="btn-155">Open source</button>Prompt
Ein weißer Button mit 1px #cbd5e1 Rahmen, 4px Radius, 14px semibold #0f172a Text und breitem 34px Seiten-Padding, das links ein graues Monospace "<" und rechts ein "/>" hält, wie ein Code-Tag. Beim Hover werden Rahmen und beide Klammern dunkel, das Padding weitet sich auf 38px und die Klammern rücken 2px nach außen. Active #f1f5f9. Focus: 2px dunkle Outline.