3

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?

Improve this question

3 Answers 3

Reset to default
3

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%     
    }

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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!

Improve this answer

Comments

0

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>

Improve this answer

Comments