<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 ----------> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-5"> <!-- BUTTONS --> <h2>All size buttons</h2> <p>Add a class .btn-* to set the size of button.</p> <a class="btn btn-xs btn-default">.btn-xs</a> <a class="btn btn-sm btn-default">.btn-sm</a> <a class="btn btn-default">default</a> <a class="btn btn-lg btn-default">.btn-lg</a> <a class="btn btn-xl btn-default">.btn-xl</a> </div> <div class="col-lg-7"> <h2>All Size rounded buttons</h2> <p>Add a .btn-round class to round as button sides<small> (The same button as above)</small>.</p> <a class="btn btn-round btn-xs btn-default">.btn-xs</a> <a class="btn btn-round btn-sm btn-default">.btn-sm</a> <a class="btn btn-round btn-default">default</a> <a class="btn btn-round btn-lg btn-default">.btn-lg</a> <a class="btn btn-round btn-xl btn-default">.btn-xl</a> </div> </div> <hr> <div class="row"> <div class="col-lg-12"> <h2>Button Groups - Set Sizes</h2> <p>To form a group of buttons add the class .btn-group-* into a div with the buttons.**</p> <p><small>* - Replace with the size of the buttons xs, sm, lg or xl (xl is a size class of this snipped).</small></p> <p><small>** - For the default size use .byn-group</small></p> <p>Add the btn-group-round class in a group of buttons to round the sides of the group.</p> <h3>Extra Small Buttons Round:</h3> <div class="btn-group btn-group-xs btn-group-round"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> <h3>Small Buttons Round:</h3> <div class="btn-group btn-group-round btn-group-sm"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> <h3>Default Buttons Round:</h3> <div class="btn-group btn-group-round"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> <h3>Large Buttons Round:</h3> <div class="btn-group btn-group-round btn-group-lg"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> <h3>Extra Large Buttons:</h3> <p>*New size .btn-group-xl</p> <div class="btn-group btn-group-xl"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> <h3>Extra Large Buttons Round:</h3> <div class="btn-group btn-group-round btn-group-xl"> <button type="button" class="btn btn-default">botão1</button> <button type="button" class="btn btn-default">botão2</button> <button type="button" class="btn btn-default">botão3</button> </div> </div> </div> <hr/> </div><!-- /#page-content-wrapper -->

/* *** .btn-xl *** */ .btn-xl,.btn-group-xl>.btn{ min-width: 10px; font-size: 1.9em; padding: 0.9rem 2rem; border-radius: 8px } /* *** .btn-round *** */ .btn-round{ border-radius: 30px } /* *** .btn-group-round *** */ .btn-group-round>.btn:first-child:not(:last-child):not(.dropdown-toggle){ border-bottom-left-radius: 30px; border-top-left-radius: 30px } .btn-group-round>.btn:last-child:not(:first-child),.btn-group-round>.dropdown-toggle:not(:first-child){ border-bottom-right-radius: 30px; border-top-right-radius: 30px }