Wie kann ich mit CSS einen Farbverlauf in den Text einer Schaltfläche einfügen, ohne den Hintergrund zu beeinträchtigen?
Posted: 07 Jan 2025, 12:10
Ich versuche, eine Schaltfläche mit weißem Hintergrund und Text mit einem Farbverlauf zu erstellen.
Das ist der Stil, den ich gerade habe, aber er zeigt nur einen weißen Hintergrund ohne den Farbverlauf im Text.
Code: Select all
&.bricks-background-light {
position: relative;
display: inline-block;
padding: 16px 24px;
border-radius: 12px;
background-color: #fff;
text-align: center;
overflow: hidden;
font-size: inherit;
color: transparent;
background: linear-gradient(90deg, #E8125C, #375D9F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}
&.bricks-background-light::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 12px;
z-index: -1 !important;
}