Skip to main content
alterado para verde
Fonte Link
Sorack
  • 26,5mil
  • 6
  • 43
  • 96

Utilizando Boostrap e Button Group:

angular
  .module('app', []);

angular
  .module('app')
  .controller('ClassesController', ClassesController);

ClassesController.$inject = [];

function ClassesController() {}
<!-- Latest compiled and minified CSS<script -->src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app">
  <div ng-controller="ClassesController as classes">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-primary">Sim<default" ng-class="{'btn-success': hoverSim}" ng-mouseenter="hoverSim = true" ng-mouseleave="hoverSim = false">Sim</button>
      <button type="button" class="btn btn-default">Nãodefault" ng-class="{'btn-success': hoverNaoConsta}" ng-mouseenter="hoverNaoConsta = true" ng-mouseleave="hoverNaoConsta = false">Não Consta</button>
      <button type="button" class="btn btn-default">Não<default" ng-class="{'btn-success': hoverNao}" ng-mouseenter="hoverNao = true" ng-mouseleave="hoverNao = false">Não</button>
    </div>
  </div>
</div>

Utilizando Boostrap e Button Group:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Sim</button>
  <button type="button" class="btn btn-default">Não Consta</button>
  <button type="button" class="btn btn-default">Não</button>
</div>

Utilizando Boostrap e Button Group:

angular
  .module('app', []);

angular
  .module('app')
  .controller('ClassesController', ClassesController);

ClassesController.$inject = [];

function ClassesController() {}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app">
  <div ng-controller="ClassesController as classes">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverSim}" ng-mouseenter="hoverSim = true" ng-mouseleave="hoverSim = false">Sim</button>
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverNaoConsta}" ng-mouseenter="hoverNaoConsta = true" ng-mouseleave="hoverNaoConsta = false">Não Consta</button>
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverNao}" ng-mouseenter="hoverNao = true" ng-mouseleave="hoverNao = false">Não</button>
    </div>
  </div>
</div>

Fonte Link
Sorack
  • 26,5mil
  • 6
  • 43
  • 96

Utilizando Boostrap e Button Group:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Sim</button>
  <button type="button" class="btn btn-default">Não Consta</button>
  <button type="button" class="btn btn-default">Não</button>
</div>