CSS-Farbverlauf (Hintergrund und Rahmen)

Question

Ich versuche, einen <a> Tag mit einem Hintergrund mit Farbverlauf und einem Farbverlauf zu gestalten.

Ich folgte einem Tutorial online und zwickte es mit den richtigen Farben, aber dann erkannte, dass es die background-image Eigenschaft festlegen muss, um den Grenzen einen Farbverlauf zu geben.

.btn-primary { 
    background-color: blue; 
    background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%); 
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat; 
    background-size: 10% 100%; 
    border-bottom: 4px solid #f15a24; 
    border-top: 4px solid #f7931e; 
    box-sizing: border-box; 
    margin: 50px auto; 
} 

Gibt es eine Weise, die ich den Code ändern kann, so dass ich ein verschiedenes Gradient für den Hintergrund der Schaltfläche festlegen kann?

Answer 1

Sie können border-image für den Rahmen verwenden und einfach background-image für den Hintergrund-Farbverlauf verwenden. Genau wie folgt aus:

.btn-primary { 
 
     background-color: blue; 
 
     background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%); 
 
     background-position: 0 0, 100% 0; 
 
     background-repeat: no-repeat; 
 
     background-size: 10% 100%; 
 
     border-bottom: 4px solid #f15a24; 
 
     border-top: 4px solid #f7931e; 
 
     box-sizing: border-box; 
 
     margin: 50px auto; 
 
     border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%  
 
    }

Answer 2

könnten Sie wahrscheinlich Ihre Regel auf ein Pseudoelement gelten: vor oder: nach und dann das Pseudo-Element über dem Anker positionieren.

how to add a pseudo-element gradient effect

Hoffnung, das hilft!

Answer 3

Hier ist ein Weg, um die Illusion eines Gradienten Grenze unter Verwendung mehrerer Hintergrund-Gradienten zu erzeugen:

.btn-primary { 
 
    display:inline-block; 
 
    padding:80px; 
 
    
 
    background: linear-gradient(to bottom, transparent 0, transparent 30px, blue 30px, white calc(100% - 30px), transparent calc(100% - 30px), transparent 100%), linear-gradient(to left, red 0%, yellow 100%); 
 
    background-repeat: no-repeat; 
 
    background-position: 30px 0, 0 0; 
 
    background-size: calc(100% - 60px), auto; 
 
}

<a class="btn-primary">test</a>