Elementor

Elementor – Default Button Styles

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code iconΒ raw code icon

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;
}

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;
}

 

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.

    1. Sniffle Valve

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

    1. Sniffle Valve

      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.

    1. Sniffle Valve

      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;
      }

    1. Sniffle Valve

      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?

    1. Sniffle Valve

      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

Your email address will not be published. Required fields are marked *