[Resolved] Create Circle Button with CSS

[Fergal]

Hey there,

Can you please advise on how to style a button so that it is a circle?

Thanks,
Fergal

[Ying]

Hi Fergal,

Do you mean the oval shaped button?
You can apply this CSS to your buttons:
border-radius: 50%;

[Fergal]

Hey Ying,

Thanks for your reply. I’m currently using border-radius: 50% and the result is oval shaped buttons. Is their a way to make them circular?

Thanks,
Fergal

[Fernando]

Hi Fergal,

You can try adjusting it to 100%, then set the paddings to somewhere around 35px top and bottom, then 10px left and right. This is just approximation though.

If you want a perfect Circle, you’ll need to turn the wrapper into a circle, then make the text float on top of that.

To do this, try adding my-circle-button to the Class list of the Button Wrapper.

Then add this CSS:

.my-circle-button {
                position: relative;
                padding: 30px !important;
                background-color: var(--accent);
                border-radius: 100%;
                width: fit-content;
            }

            .my-circle-button > .gb-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100px;
                margin: 0 !important;
                background-color: transparent !important;
            }

[Fergal]

Hey Fernando,

Thanks for your help and those instructions. On desktop it is now a circle which is great, but would like to reduce the size; maybe by half or more. And on mobile it is oval; can we please get it circle and reduce the size as well?

Thanks,
Fergal

[Fernando]

You added the class to the Button, not the Button Wrapper. Can you try adding it to the Button Wrapper? Example: https://share.getcloudapp.com/kpuWl0EA

[Fergal]

Oops sorry I did add it to the button. I’ve now added it to the button wrapper.

Do I need to remove these settings from the button as well?

View post on imgur.com

[Fernando]

Yes, you can remove those.

[Fergal]

Great, thanks! I’ve now done that.

Any chance you can please help me get the circle shape on mobile and tablet? It is a very wide oval right now.

[Fernando]

I see. I updated the code above. Can you test that?

[Fergal]

Sweet thanks Fernando! Much better. To make the circle a bit bigger do I just increase the padding here?

.my-circle-button {
    position: relative;
    padding: 30px !important;
    background-color: var(--accent);
    border-radius: 100%;
    width: fit-content;
}

[Fernando]

Yes, just increase it there. I also defined the color there but you can remove those parameter if you want to set it in the Block Settings of the Buttons Wrapper instead.

[Fergal]

Great it looks perfect, thanks for the amazing help as always.

[Fernando]

You’re welcome Fergal!

[Fergal]

Hey Fernando,

Sorry to circle back to this, but could please use your help with one more thing here.

Can you please help me center the button on mobile and tablet?

View post on imgur.com

I tried centering the blocks, but didn’t seem to do anything.

[Author]

Posts