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

Question

<button class="ui button create-new-menu-btn">Create New Menu</button>

. create-new-menu-btn {
    border-radius: 0;
    background-color: red;
}

The above code is not working

score 5 · Accepted Answer · answered Sep 23 '16 at 11:53

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)

Thanks! for the answer @Sarthak and I have a doubt. Using id is not recommended in CSS right? Is there is any other way of doing it without id selector? — , Sep 26 '16 at 06:03
@Naveen using a id in the body tag is the generally accepted way of overriding the CSS of frameworks like bootstrap and semantic-ui. Go with Method 1. Method 2 is not preferred when coding because of inability to follow the DRY principles. — Sarthak, Sep 26 '16 at 06:16

score 2 · Answer 2 · edited Jan 09 '18 at 11:26

2

You can also add semantic ui's classes before your own for specificity. For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:

ui.button.create-new-menu-btn {
  ....
}

edited Jan 09 '18 at 11:26

Nawrez

3,314
8
28
42

answered Jan 09 '18 at 10:15

Lazar Nikolic

4,261
1
22
46

score 2 · Answer 3 · answered Aug 26 '19 at 15:38

2

If using JSX, you can use inline styling for the targeted elements

Example:

<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>

answered Aug 26 '19 at 15:38

raj chakravarthy

65
6

score 0 · Answer 4 · answered Sep 23 '16 at 12:34

0

#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;

}

It will target all button with ui class.

Hope It will be useful :)

answered Sep 23 '16 at 12:34

priya_singh

2,478
1
14
32

Thanks! for the answer @priya_singh and I have a doubt. Using id is not recommended in CSS right? Is there is any other way of doing it without id selector? – Sep 26 '16 at 06:02
Yes. Just increase its specificity so that it overrides existing ui styling. – priya_singh Sep 26 '16 at 06:51

score 0 · Answer 5 · edited Aug 28 '20 at 13:39

0

Put .ui.button infront of your class name create-new-btn. It should look like below

.ui.button.create-new-btn {
  //Your css code
}

Then in your html/jsx template you can use the class name create-new-btn like below:

<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>

edited Aug 28 '20 at 13:39

Dharman

30,962
25
85
135

answered Aug 28 '20 at 13:33

Hung Vu

5,624
2
30
27

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

5 Answers5

Linked