<div class="wrapper"> <a class="btn btn-link1"><span class="glyphicon glyphicon-thumbs-up"></span> Thumbs-up</a> <a class="btn btn-link"><span class="glyphicon glyphicon-flash"></span> Flash</a> <a class="btn btn-link"><span class="glyphicon glyphicon-cloud"></span> Cloud</a> </div> <!--Icons from Glyphicon.com-->
.btn.btn-link { font-weight: 300; font-size: 13px; background-color: transparent; color: #2d2d2d; border: 0; border-radius: 0; outline: 1px solid; outline-offset: 1px; outline-color: #2d2d2d; margin: 20px; float: left; padding: 13px 18px; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .btn.btn-link:hover { background-color: #2d2d2d; color: white; outline-offset: 10px; outline-color: rgba(45, 45, 45, 0); } .wrapper{ margin-left: 15px; } .btn.btn-link1 { font-weight: 300; font-size: 13px; background-color: transparent; color: #2d2d2d; border: 0; border-radius: 0; outline: 1px solid; outline-offset: 1px; outline-color: #2d2d2d; margin: 20px; float: left; padding: 13px 18px; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .btn.btn-link1:hover { background-color: #2d2d2d; color: white; outline-offset: 10px; outline-color: rgba(45, 45, 45, 0); }