Classic button - flat - but see the shadow

[anni]

Hi!

I am using Classic button / flat. The font is very bad as you see the button here:
http://demo.finnguru.fi/ota-yhteytta/

Can I change the font of all the buttons to be the one I am using as body font? Without shadow?

Thank you!

[Prasant]

Hello Anni,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

.x-btn, .button, [type="submit"] {
    text-shadow: none;
    font-family: montserrat;
}

.x-btn, .button, [type="submit"]:hover{text-shadow: none;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[anni]

Thank you and than you for hint for learning CSS! Learning it bit by bit.

I can see still the shadow in the hover alt ought it is “none”.

Also, the text is not centered - centered. Can we effect on that?

[jade]

Hello Anni,

I checked the button but I can’t seem to see the shadow on hover:

As for putting settings the button text in the middle, please update this code:

.x-btn, .button, [type="submit"] {
    text-shadow: none;
    font-family: montserrat;
}

to

.x-btn, .button, [type="submit"] {
    text-shadow: none;
    font-family: montserrat;
    padding: 0.563em 1.125em;
}

Hope this helps.

[anni]

Thank you, the text buttons are now centered.

Ah, the form button is without the shadow, but if you see e.g. frontage: http://demo.finnguru.fi/
The buttons “lue lisää” are still with hover shadow.

[mldarshana]

Hi Anni,

Please add the following CSS rule as well into your X -> Theme Options -> CSS area.

.x-btn:hover, .button:hover, [type="submit"]:hover {
    text-shadow: none;
}

Hope that helps.
Thanks!

[anni]

Thank you! It works perfectly

[friech]

We are delighted to assist you with this.

Cheers!