14 replies

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

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

 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

Button with gradient

Similar Threads

Button with gradient

Similar Threads

Similar Threads

Similar Threads