Circular button – Themeco Community

Circular button

Jai S — Fri, 07 Nov 2014 05:02:42 +0000

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!

Reply To: Circular button

Paul R — Fri, 07 Nov 2014 12:54:30 +0000

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

Reply To: Circular button

Jai S — Tue, 11 Nov 2014 23:51:53 +0000

This reply has been marked as private.

Reply To: Circular button

Rubin — Wed, 12 Nov 2014 14:08:09 +0000

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

Reply To: Circular button

Cousett — Wed, 12 Nov 2014 14:09:35 +0000

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

Reply To: Circular button

marcel w — Tue, 03 Mar 2015 12:11:16 +0000

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

Reply To: Circular button

Paul R — Tue, 03 Mar 2015 15:06:41 +0000

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.

Reply To: Circular button

marcel w — Mon, 09 Mar 2015 16:17:12 +0000

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

Reply To: Circular button

Nico — Mon, 09 Mar 2015 18:33:16 +0000

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!

Reply To: Circular button

marcel w — Mon, 09 Mar 2015 22:38:41 +0000

Í’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!!!
🙂