0

Using Semantic UI I have this button.

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<input class="ui blue big basic button" type="submit">

The thing is I'm having a problem when changing the background color of this buttons, I've tried adding an ID to the button and change the background color in the CSS style sheet but this didn't work. Can someone give me a hint?

Ray
  • 3,864
  • 7
  • 24
  • 36
Marcos Riani
  • 1
  • 1
  • 2
  • Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – ChrisR Sep 07 '18 at 11:51
  • Looks like your sample code was there all along hiding in your question. It had to be formatted properly – Ray Sep 08 '18 at 14:07
  • Hi @MarcosRiani. If the answer has solved your question please consider accepting and upvoting it. This indicates to the wider community that you have found a solution for your question and also earns both you and the answer some reputation – Ray Sep 09 '18 at 17:41

1 Answers1

3

If you want to provide some basic colors, semantic ui already has the classes for you. You can add the classes red ,orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black to the button.

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<button class="ui red button">Red</button>

You can also add the class basic to make only the button outline colored.

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<button class="ui red basic button">Red</button>

If you want to provide a custom color this question already has some answers.

In your question's case, it's more difficult. You want only the outline and text-color changed. If you inspect the button, you'll they use the property !important for color and box-shadow (yes, they're using box-shadow property instead of border property to create a border). So you too will have to use !important. 

#blah input.ui.blue.big.basic.button {
  box-shadow:0px 0px 0px 1px #8f3f9f inset !important;
  color: #8f3f9f !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/button.css" rel="stylesheet"/>
<div id="blah">
<input class="ui blue big basic button" type="submit">
</div>

The idea is that you have to make it more specific than the semantic UI properties.

Ray
  • 3,864
  • 7
  • 24
  • 36