<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="container"> <h1 align="center">Transparent Buttons</h1> <div class="buttons row1"> <a href="#" class="button button-01"> xxxxxxxxxxxxx </a> <a href="#" class="button button-02"> xxxxxxxxxxxxx </a> <a href="#" class="button button-03"> xxxxxxxxxxxxx </a> </div> <div class="buttons row2"> <a href="#" class="button button-01"> xxxxxxxxxxxxx </a> <a href="#" class="button button-02"> xxxxxxxxxxxxx </a> <a href="#" class="button button-03"> xxxxxxxxxxxxx </a> <a href="#" class="button button-04"> xxxxxxxxxxxxx </a> <a href="#" class="button button-05"> xxxxxxxxxxxxx </a> </div> <div class="buttons row3"> <a href="#" class="button button-01"> xxxxxxxxxxxxx </a> <a href="#" class="button button-02"> xxxxxxxxxxxxx </a> <a href="#" class="button button-03"> xxxxxxxxxxxxx </a> <a href="#" class="button button-03"> xxxxxxxxxxxxx </a> </div> <div class="buttons row4"> <a href="#" class="button button-01"> xxxxxxxxxxxxx </a> <a href="#" class="button button-02"> xxxxxxxxxxxxx </a> </div> </div> </div> </div>

/* BUTTONS*/ .buttons { display: flex; } .button { box-sizing: border-box; color: #000000; display: block; font-size: 1.25em; margin: 0 1em 0.3em 0; padding: 0.5em 1em; text-align: center; flex: 1; border: thin solid; } .button:hover{ color: #FFF; background: #000000; border-color: #000000; text-decoration: none; } .buttons.row4 { display: inline-flex; }