JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
  <div class="span12 pagination-centered">
    <div class="btn-group">
      <a href="" class="btn btn-primary btn-xlarge">BUTTON1<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle= "tooltip" data-placement="bottom" title="tooltip1"></span></a>
    </div>
    <div class="btn-group">
      <a href="" class="btn btn-primary btn-xlarge">BUTTON2<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="tooltip2"></span></a>
    </div>
  </div>
</div>

CSS

.glyphicon {
  position: absolute;
  right: 5px;
  top: 70px;
  color: #6B3E80;
  font-family: 'Glyphicons Halflings';
  font-weight: normal;
  font-size: 14px;
}

.btn {
  padding: 14px 24px;
  border: 4px solid #6B3E80;
  color: #6B3E80;
  font-family: Futura;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
}

.btn-primary {
  background: #ffffff;
  color: #6B3E80;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background: gray;
  border: 4px solid gray;
  color: #ffffff;
}

.btn-primary:active,
.btn-primary.active {
  background: gray;
  box-shadow: none;
}

.btn-primary:active:focus {
  color: #ffffff;
  background-color: gray;
  border-color: gray;
}

.btn.sharp {
  border-radius: 0;
}

.btn-xlarge {
  padding: 18px 75px;
  font-size: 40px;
  line-height: normal;
  width: 275px;
}
.btn:hover .glyphicon{
	color:#fff;
}