Image inside Call to Action Button

Hi there,

Thanks for the great support and amazing theme, I would like to add an image inside the Syndey Call to Action button. If it is not possible I would like to have an image very close to the button but outside, Please if both are possible and also how to style the buttons means increasing the width and height of the call to action button change the font color, background color, hover color etc,
kindly share the solution.

Thanks!
Vince

Hi,

Unfortunately you can’t add an image inside the button, image outside the button you can add in Page Builder anywhere where page builder will allow you. I can help you to style your actual call to action button, but please post a link to your website and point out which button you want to change the style for, so I can give you a working solution for that.

Kind Regards,
Csaba

Hi Csaba,

Thanks for the quick response and truly great support I would like to have something as shown in the images (image1, image2) including the hovering effect, But I couldn’t make it as I want, I used a row layout of 5 and used the Sydney call to action widget and site origin image widget, Kindly check the link to the page of my staging site. However, I have a similar call to action button on the home page, So customizations should affect only the buttons on this particular page only.
Kindly share the solution.

Thanks!
Vince

Hi,

Your button and image looks very similar to the image, can you, please clarify what is the issue now?

Kind Regards,
Csaba

Hi Csaba,

Thanks for the support I was able to achieve some requirements But I want to increase the spacing for the call to action buttons from the top for the top button and also increase the bottom space for the call to action button at the bottom, No need to increase the space between those two and Need to increase the spacing only for the Desktop version.

Thanks!

Hi,

You can increase the padding of the area by modifying the padding values of the Rows, or you can just modify the button padding by editing the button widget’s padding options ( under Page Builder Edit Options / Design ). In case you only want to reduce the top space of the buttons you can do that with this Custom CSS:

.roll-promobox .promo-controls {
    margin-top: 0 !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba