Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
14 replies
Scruffy

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

 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
image.png
image.png
Was this page helpful?