CSS渐变（背景和边框）

Question

I'm trying to style an <a> tag with a gradient background and a gradient border.

I followed a tutorial online and tweaked it with the right colours, however then realised it needs to set the background-image property in order to give the borders a gradient.

.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;
}

Is there a way I can modify the code so that I can specify a different gradient for the background of the button?

Answer 1

you can use border-image for the border, and just use background-image for the background gradient. Just like this:

  .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

You could probably apply your rule to a pseudo-element :before or :after and then position the pseudo-element over your anchor.

how to add a pseudo-element gradient effect

Hope that helps!

Answer 3

Here is a way to create the illusion of a gradient border using multiple background gradients:

 .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>