Если вы хотите предоставить некоторые базовые цвета, у семантического интерфейса уже есть классы для вас.Вы можете добавить классы red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black к кнопке.
<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>
Вы также можете добавить класс basic, чтобы окрасить только контур кнопки.
<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>
Если вы хотите указать собственный цвет , на этот вопрос уже есть несколько ответов.
В случае с вашим вопросом это сложнее.Вы хотите изменить только контур и цвет текста.Если вы осмотрите кнопку, вы будете использовать свойство !important для цвета и тени блока (да, они используют свойство box-shadow вместо свойства border для создания границы).Так что вам тоже придется использовать !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>
Идея состоит в том, что вы должны сделать его более конкретным, чем свойства семантического интерфейса.