CTA-Banner Pfeil rechts
CTA-Banner Pfeil rechts: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-192 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
max-width: 460px;
text-align: left;
color: #0f172a;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 18px 22px;
cursor: pointer;
transition: border-color .2s,box-shadow .2s
}
.btn-192 span {
display: flex;
flex-direction: column;
gap: 4px
}
.btn-192 b {
font: 700 17px/1.1 system-ui,sans-serif
}
.btn-192 small {
font: 400 13px/1.3 system-ui,sans-serif;
color: #64748b
}
.btn-192 i {
width: 40px;
height: 40px;
display: grid;
place-items: center;
font: 700 18px/1 system-ui,sans-serif;
font-style: normal;
color: #fff;
background: #0f172a;
border-radius: 50%;
transition: transform .25s,background .2s
}
.btn-192:hover {
border-color: #0f172a;
box-shadow: 0 8px 24px -10px #0f172a55
}
.btn-192:hover i {
transform: translateX(4px);
background: #2563eb
}
.btn-192:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 3px
}
.btn-192:active {
background: #f8fafc
}
HTML
<button class="btn-192"><span><b>Book a demo</b><small>30 minutes with an engineer</small></span><i aria-hidden="true">→</i></button>Prompt
Ein heller CTA-Banner-Button (bis 460px breit): weiß mit 1px #e2e8f0 Rahmen, 16px Radius, 18px mal 22px Padding, links eine 17px fette Headline und ein 13px #64748b Untertitel, rechts ein 40px dunkler Kreis mit Pfeil nach rechts. Hover dunkelt den Rahmen, fügt einen weichen Schatten hinzu und schiebt den Pfeilkreis 4px nach rechts, wobei er blau #2563eb wird; Active #f8fafc. Focus: 2px dunkle Outline.