Elementor – Default Button Styles

UPDATE: 19 June 2018

A couple of comments have indicated that certain style changes were not taking effect. This generally happens because the selector is not specific enough. Without going into a lot of detail, there is one way to overcome this and although it is sometimes frowned upon by the CSS “purists”, others live by the saying – “if all else fails, try !important πŸ™‚

Note in the updated CSS below where and how !important is used.

.elementor-button {
	background-color: darkblue;
    color: white;
    font-size: 40px !important;
    font-family: "Times New Roman", Times, serif;
    border: 2px solid red;
    border-radius: 40px !important;
    box-shadow: 10px 10px 8px #888888 !important;
}
Updated CSS using !important

Until Elementor comes up with global settings for various elements such as buttons and the like, this is relatively easy to implement to have all your Elementor buttons be styled in the same way.

The Simple CSS plugin is used to enter the CSS.

CSS for this tutorial below the video.

.elementor-button {
	background-color: darkblue;
    color: white;
}

.elementor-button:hover {
	background-color: white;
    color: blue;
}
CSS for Default Elementor Buttons

 

20 thoughts on “Elementor – Default Button Styles

  1. Good. You might mention to your viewers that you are using the Simple CSS plugin. Some might miss this.

    • Thank you Larry, good point. I will make mention of this in the video description and on the site. πŸ™‚
      Cheers!
      Lyle

    • Hi Sol,
      In Elementor > Settings, have you disabled default colors? If not, you may have to add !important to color.
      color: white !important;
      Cheers!
      Lyle

  2. “Hi John,
    You’re welcome!
    To change the default text type and size, just add those to the code provided.
    Here is a link to W3Schools that will get you started.
    https://www.w3schools.com/Css/css_text.asp
    Cheers!
    Lyle”

    Thank you Lyle. I have tried to change the font type and size but couldnt. Neither can i change the shadow or the border radius. Can change weight, line height, color, background color and maybe more but not the above mentioned. Will mail support and see what they come up with, unless you have an idea.
    Thank you.

    • As “we” say in the CSS biz, “if all else fails, try !important” πŸ™‚ Give this a go (worked for me):

      .elementor-button {
      background-color: darkblue;
      color: white;
      font-size: 40px !important;
      font-family: “Times New Roman”, Times, serif;
      border: 2px solid red;
      border-radius: 40px !important;
      box-shadow: 10px 10px 8px #888888 !important;
      }

    • Good to hear! πŸ™‚
      The use of !important will not mess with anything as it is a legitimate CSS declaration and is used in many themes and plugins where the “cascade” part of CSS needs to be “adjusted”.

  3. Thank you so much for the condensed info and your help Lyle. Should i make future conversations here if i have any questions or on your youtube channel. What would be better for you and your audience engagement?

  4. And by the way i used the SiteOrigin css plugin because the SimpleCss is not updated for the current version of wordpress. What do you think SiteOrigin Css?

    • I haven’t used the SO plugin so cannot comment. But I would not be concerned about Simple CSS as I still use it on all of my sites. Tom Usborne, the developer, is about as good as they come and is probably too busy keeping up with his fantastic GeneratePress theme and Premium plugin. I would and still do recommend Simple CSS.

Leave a Comment