Bootstrap Hover Blue Button Bar


	<head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
</head>

<div class="container">
	<div class="row">
        <div class="btn-group" role="group" aria-label="Default button group">
            <button type="button" class="btn btn-sm"><i class="fa fa-clock-o fa-5x"></i></button>
            <button type="button" class="btn btn-sm"><i class="fa fa-chevron-up fa-5x"></i></button>
            <button type="button" class="btn btn-sm"><i class="fa fa-desktop fa-5x"></i></button>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="btn-group-vertical" role="group" aria-label="Default button group">
            <button type="button" class="btn btn-sm"><i class="fa fa-clock-o fa-5x"></i></button>
            <button type="button" class="btn btn-sm"><i class="fa fa-chevron-up fa-5x"></i></button>
            <button type="button" class="btn btn-sm"><i class="fa fa-desktop fa-5x"></i></button>
        </div>
    </div>
</div>
	<script type="text/javascript">
	
	</script>

    /* Blue Flat Button
==================================================*/
.btn-sm{
  position: relative;
  vertical-align: center;
  margin: 0px;
  height: 100x;
  padding: 20px 20px;
  font-size: 4px;
  color: white;
  text-align: center;
  text-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  background: #62b1d0;
  border: 0;
  border-bottom: 3px solid #9FE8EF;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -3px #9FE8EF;
  box-shadow: inset 0 -3px #9FE8EF;
}

.btn-sm:active {
  top: 2px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-sm:hover {
  background: #45E1E8;
}