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

 

22 thoughts on “Elementor – Default Button Styles”

  1. Avatar

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

    1. Avatar
      Sniffle Valve

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

    1. Avatar

      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. Avatar

    “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. Avatar
      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. Avatar

      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. Avatar

    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. Avatar

    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. Avatar

      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.

  5. Avatar

    In my situation, the default background color is green, not gray. I assume it’s coming from my theme (even though I don’t have “disable” checked in Elementor preferences). What’s weird is that I want no background color at all, and there’s no way to do that (or maybe CSS background-color: none;). Choosing a background color forces it to be something (other than none), and not choosing a background color forces it to be the default for the button type (there should be a type of none, or default should be none). I guess I can pick any color, then set the transparency to 100%…I.E. rgba (0,0,0,0). What an odd work around to have no color.

    1. Avatar

      Hi Ben,
      That green is coming from what is set for the Accent color in the Default Colors > Color Palette. (Hamburger Menu – top left > Default Colors > Style > Color Palette)
      Here is the updated CSS for a transparent background. Note the addition of !important. Adjust other values to suit.

      .elementor-button {
      background-color: transparent !important;
      color: blue;
      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;
      }

      Cheers!
      Lyle:

Leave a Comment

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

Scroll to Top