Kevin Powell - Community•5mo ago

Button with gradient

Hi Everyone! Please could I have some help on how I can achieve something like this. For context, I am using bulma and sass but I dont mind if there is a vanilla css solution. Thank you.

 css
.button{
    border-radius: 50%;
    border: 5px solid; 
    border-image: linear-gradient(90deg, rgba(11,100,98,1) 0%, rgba(240,171,12,1) 100%) 1;
    background: none;
}

 css
.button{
    border-radius: 50%;
    border: 5px solid; 
    border-image: linear-gradient(90deg, rgba(11,100,98,1) 0%, rgba(240,171,12,1) 100%) 1;
    background: none;
}

 html
 <button class="has-text-white button is-rounded is-large has-text-weight-bold">
                            More
                            <span class="icon is-large ml-2">
                                <ion-icon name="chevron-forward-outline"></ion-icon>
                            </span>
                        </button>

 html
 <button class="has-text-white button is-rounded is-large has-text-weight-bold">
                            More
                            <span class="icon is-large ml-2">
                                <ion-icon name="chevron-forward-outline"></ion-icon>
                            </span>
                        </button>

Above is my current implementation and I have provided an image of what it produces (the square button image). Ignore the text differences. im just focused on the button border

11 Replies

capt_uhu•5mo ago

unfortunately border-radius and border-image don't work together in the way that most people expect them to (border-radius functions as a fall back to border-image if the image source doesn't load.) So to get what your trying to do here you'll need multiple backgrounds and multiple background-origins. Have a look here: https://codepen.io/jsnkuhn/pen/zYLymmy

Jason Kuhn

CodePen

Gradient "Border"

...

MarkBoots•5mo ago

without having to match the background of the button with the page https://codepen.io/MarkBoots/pen/XWLKxWv

MarkBoots•5mo ago

Entity808•5mo ago

Had a different problem, where I didn't want to set a background on a button with a gradient border and border radius. But that different problem has the same solution as your problem. My solution is almost the same as @MarkBoots To get a gradient border with border radius I used:

.button {
  position: relative;
  /*
  If using a actual <button> and not an <a>, consider using:
  border: none;
  */
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary) -10%, var(--accent) 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.button {
  position: relative;
  /*
  If using a actual <button> and not an <a>, consider using:
  border: none;
  */
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary) -10%, var(--accent) 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

Just put the desired radius and padding on the button itself.

Entity808•5mo ago

ScruffyOP•5mo ago

Thank you for the explanation, i understand it now! Great example below Perfect, thank you for creating this and sharing! Thank you aswell for sharing your solution! I have another question if you dont mind, Now that you/we have got the circular gradient background, How does one achieve the circle that continues the button gradient around the chevron part of the button?

Chris Bolson•5mo ago

I didn't post this yesterday as you already had a couple of good answers and Marks solution with the transparent background seemed to be the most flexible, however, based on jsnkuhn's suggestion, I did go as far as including the circle behind the chevron so it might be of some use following your latest question: https://codepen.io/cbolson/pen/abgZaXe I used an absolutely positioned element for the icon to get it to be placed over the border but this could be achieved in different ways, it rather depends on "how" you want the background color to blend with the border gradient. I would have thought that getting it to match the gradient exactly would be quite difficult unless they (the border gradient and the circle) become a single element in some way.

clevermissfox•5mo ago

Maybe use a fixed gradient and use the same variable for both ?

MarkBoots•5mo ago

did some more masking https://codepen.io/MarkBoots/pen/JjQRdoo

Mark Boots

CodePen

JjQRdoo

...

ScruffyOP•5mo ago

You guys are absolutely brilliant this is amazing help thank you so much Chris, Mark, Entity and Jason. I will read through each of your solutions and understand exactly how you produced this. Great work! Thank you once again. :)

MarkBoots•5mo ago

you're welcome. good luck on your project

Gaming

Programming

Button with gradient