Rounded off buttons

surviphil

Hi, im creating a website for a customer and was wondering if you could help me to solve a problem with buttonizer.
This is the site: http://s821416643.online.de/
I want to have a round edge on the left side of the orange call button like here: https://ariana-dolmetscher.de/de
But it always gets cut off somehow. Also i want to move the icon a little bit closer to the text.
How can i do it?

Thank you!

James

Hi surviphil ,

Thanks for reaching out to us!

For rounding out the corners of the button, you can use pixels instead of percentage when setting the border-radius of the button.

This is with 50px borders instead of 10%:

Regarding bringing the icon closer to the text, we unfortunately don't have a setting to do this.
But you can perhaps use a custom CSS to achieve this.

Here's a custom CSS that you can use:

.buttonizer .buttonizer-button i.fas.fa-headset {
    /* decrease 15px to shorten the left side of the button */
    margin: 0px 0px 0px 15px;

    /* increase 12px to bring the icon closer to the text */
    transform: translate(12px, 0px);
}

Just copy and paste this into WordPress' Additional CSS.
It should end up looking like this:

Let me know if this works for you! 😄

surviphil

Thank you for the quick reply!
The % works fine! Thank you! The CSS unfortunately didn't work
Do you know what could cause this?

Kind regards,
Philipp

James

Hi Philipp,

Glad to hear that the percentage worked!

I forgot that the CSS needed to have !important for it to work. Here's an updated CSS:

.buttonizer .buttonizer-button i.fas.fa-headset {
    /* decrease 15px to shorten the left side of the button */
    margin: 0px 0px 0px 15px !important;

    /* increase 12px to bring the icon closer to the text */
    transform: translate(12px, 0px) !important;
}