CSS Gradient Borders
Farbverläufe für moderne CSS-Borders nutzen
Ein Farbverlauf als Border klingt zunächst nach einer einfachen CSS-Eigenschaft – tatsächlich gibt es aber keine native border-gradient-Eigenschaft. Stattdessen nutzt man CSS-Backgrounds, transparente Borders und die Background-Boxen padding-box und border-box. Das Prinzip ist besonders interessant, weil es sich flexibel auf lineare Verläufe, radiale Verläufe, mehrere Farben, Hover-Effekte und CSS Custom Properties übertragen lässt.
Button Element definieren
Im Beispiel wird ein normaler Button verwendet. Es kann aber auch jedes andere Element dafür eingesetzt werden.
<button> Example </button>
Buttton via CSS reseten
Dies ist nur für Buttons notwendig, damit diese als normales Element funktionieren.
button {
appearance: none;
-webkit-appearance: none;
border-radius: 6px;
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
font-weight: 500;
color: #FFFFFF;
cursor: pointer;
}Gradients definieren
An dieser Stelle kommt nun der entscheidende CSS Trick. Wir arbeiten mit einem transparenten Border und setzen dem Button einen Gradientverlauf mit der Angabe border-box. Der zweite Gradient mit der Angabe padding-box definiert den Hintergrund des Elements. Somit kann der Button trotz Gradient-Border flexibel eingefärbt werden.
button {
border: 2px solid transparent;
background:
linear-gradient(#000000, #000000) padding-box,
linear-gradient(
135deg,
#ff0066,
#ffcc00,
#6600ff
) border-box;
}