How to customize the Semantic UI buttons(background-color, border-radius and all)

Question

How to customize the Semantic UI buttons(background-color, border-radius and all)

Create New Menu         


        

Answer 1

You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.

Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

For your particular problem:

One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:

Method 1

#bodyid .create-new-menu-btn {
    //Properties
}

Another way is to simply add an id to the element you want to select

Method 2

#create-new-menu-btn {
}

Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)

Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)