[Jai SParticipant]

Hi,

Is there a way to have a round circular button? The only options I can see are square, rounded (but still elongated), and pill.
I guess I can always design something just as an image and use that to link through instead, but was wondering if it was possible with the button feature.

Thanks!

[Paul RModerator]

Hi Jai,

Thanks for writing in!

That is not available by default but possible using custom css.

If you can send us the link where you want the button to be circular
we can help you with the css.

http://theme.co/x/demo/integrity/1/shortcodes/buttons/

Thanks

[Jai SParticipant]

This reply has been marked as private.

[RubinKeymaster]

The problem with making this circular is that the button would have to be huge (at least 120px) due the fact that the next is so long so I would not recommend doing that since the button then would look very odd. In case I am misunderstanding you. You want a circle around the text (circle button). The height of this would always have to be the same as the width so imagine how high the button must be to build a circle. Additionally the height would break some of the layout with will need additional tweaking. Making just the corners round / circleish would be no problem at all.

Let me know if I am wrong with my assumption

[CousettMember]

Try adding some CSS code under Appearance -> Customize -> Custom -> CSS

a.x-btn.my-btn-shopthislabel {
width: 14%;
height: 0;
padding-bottom: 12%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
background: #464646;
box-shadow: 0 0 3px gray;
}

[marcel wParticipant]

Hi guys,

I seem to have a small issue with my round button.
I use it in combination with an icon.
If I hover over the button the border changes color (wich I want)
But when I start hovering over the icon, the border changes back again to the original color.

URL: http://www.atplexamen.nl/mijn-dashboard-2/

I’d like the border of the button to stay at the blue color also when I hover over the icon. It looks a bit silly now.
don’t look at the mess on the page please, I’m just trying to experiment with round content bands aswell.

Thanks in advance!!

Cheers,
Marcel

[Paul RModerator]

Hi Marcel,

To fix it, you can add the code below under Custom > CSS in the Customizer.

body.page-id-2005 .x-btn.mybtn:hover {
      background: transparent;
}

body.page-id-2005 .x-btn.mybtn {
      z-index: 99999;
      background: transparent;
}

Hope that helps.

[marcel wParticipant]

Ahh that worked perfect 🙂
The only thing now is that i’d like the background of the button to be white, is this possible?
I’m sorry if I am causing you a headache.

Regards,
Marcel

[NicoModerator]

Hi There,

Great to hear that it worked. No worries, it does not cause us any headaches as long as it could help you.

However, not sure about what are you trying to achieve, would you mind sending us some screenshot.

Thank you so much.

Cheers!

[marcel wParticipant]

Í’m sorry but I am not able to send a screenshot now.

URL: http://www.atplexamen.nl/mijn-dashboard-2/

I’d like the round buttons to have a white background color and not the same background color as the rest of the page. Also when I hover over the button i’d like the background color to stay white.

Is this possible?

Thanks in advance!!!
🙂

[Rue NelModerator]

Hello,

Please try to add the code below under Custom > CSS in the Customizer.

.x-btn.mybtn {
    background-color: #fff;
    color: #ccc;
    box-shadow: none;
    border: none;
    z-index: 0;
}

.x-btn.mybtn:hover {
    background-color: #fff;
    border: none;
    box-shadow: none;
}

Hope this helps.

[Author]

Posts