Bootstrap «кнопка» без класса btn

Question

Возможно ли иметь такой дизайн, но без класса btn?

Мне нужно отобразить это, чтобы информировать пользователя о статусе, но я не хочу менять стиль «mousover», информацию juste.

Код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<div class="btn-group" data-toggle="buttons"> 
 
\t <label class="btn btn-default btn-sm btn-ok active"> 
 
\t \t <input type="radio" name="relevance" value="1" checked="checked"/> 
 
\t \t O 
 
\t </label> 
 
\t <label class="btn btn-default btn-sm btn-ko "> 
 
\t \t <input type="radio" name="relevance" value="0"/> 
 
\t \t N 
 
\t </label> 
 
\t <label class="btn btn-default btn-sm btn-dunno "> 
 
\t \t <input type="radio" name="relevance" value="-1"/> 
 
\t \t ? 
 
\t </label> 
 
</div>

Мой результат (с пользовательского класса):

https://drive.google.com/file/d/0B6CT8IKYEHhydUFCVVpvNE9SWDg/view?usp=sharing

Answer 1

Самое простое решение - добавить «отключенный» класс к кнопкам и исправить непрозрачность.

.foo .btn.disabled {opacity: 1; filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 

Answer 2

Вам просто нужно переопределить :hover и :active селекторы для .btn и .btn-default класс в CSS.

CSS Bootstrap изменяет цвет фона на :hover и добавляет внутреннюю тень сверху на :active.