Arrows On Slider

Good day.

I would like to visually emphasize the arrows on the sliders of my website.
Is there a way I can add a circle behind the arrows so that it’s easier to see?

Please view ‘Current Arrow.png’ & ‘current arrow 2.png’ to reference which arrows I am referring to.

And please view ‘arrow.png’ to reference what I would like to do to the arrows.

Perhaps there is some custom CSS I can add.

Thanks a ton!
You guys are fantastic!

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the URL of the website to check it myself and help you out accordingly.

Best Regards

Inserted.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-btn-arrow {
    background: blue;
    padding: 10px;
    border-radius: 50px;
}

Best Regards

Yes! Looks great.

Could we change the arrows to white instead of black?
Also, could we add some space between the arrows and the widget? (as they are currently touching)

Attachments:

You must be logged in to view attached files.

Hello,

Please try and replace the previous Custom CSS with the following.

.wd-btn-arrow {
    background: #DDB860;
    padding: 20px;
    border-radius: 50px;
    margin: -20px;
    color: white;
}

Best Regards

[Author]

Posts