Button Shortcode Alteration

[riugn557]

Hi there,

I have placed a button on this page https://thelanguagesherpa.com via a shortcode.

Do you know how I can alter the:

1. button’s border’s colour?
2. the button’s border’s colour when hovered over ?
3. the thickness of the button’s border (both normally and hovered) ?
4. the font of the text inside the button?
5. the colour of the icon in the button before and after hover?

Thank you!
LS

[jade]

Hi LS,

You can add a class to your button shortcode like this:

[x_button class="styled-button" type="transparent" shape="rounded" size="regular" href="#example" title="Example"]<span style="color: #072031;">Russian</span>[/x_button]

Then target the button using the class added to it, based on the example the class is styled-button then add this CSS:

.styled-button {
    border-color: #000;
    border-width: 2px !important;
    font-size: 14px !important;
}

.styled-button:hover {
    border-color: #333;
    border-width: 1px !important;
}

.styled-button i {
    color: red !important;
}

.styled-button:hover i {
    color:green !important;
}

Kindly change the values of the style to your preference.

Hope this helps.

[riugn557]

Hi Jade,

That’s great, thank you!

LS

[jade]

You’re most welcome, LS.