<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="row"> <div class="col-md-6"> <h3>Button <strong>Bold Colors</strong></h3> <button type="button" class="btn btn-round color1">Button</button> <button type="button" class="btn btn-round color2">Button</button> <button type="button" class="btn btn-round color3">Button</button> <button type="button" class="btn btn-round color4">Button</button> <h3>Button <strong>Active</strong></h3> <button type="button" class="btn btn-round color1 active">Button</button> <button type="button" class="btn btn-round color2 active">Button</button> <button type="button" class="btn btn-round color3 active">Button</button> <button type="button" class="btn btn-round color4 active">Button</button> <h3>Button <strong>Disabled</strong></h3> <button type="button" class="btn btn-round color1" disabled="disabled">Button</button> <button type="button" class="btn btn-round color2" disabled="disabled">Button</button> <button type="button" class="btn btn-round color3" disabled="disabled">Button</button> <button type="button" class="btn btn-round color4" disabled="disabled">Button</button> </div> </div> </div>

.btn.btn-round { padding: 8px 25px; text-shadow: none; box-shadow: none; transition: all 0.12s linear 0s !important; color: #fff; font-weight: 600; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } .btn-round.color1 { background-color:#344D90; border-color:#344D90; } .btn-round.color2 { background-color:#5CC5EF; border-color:#5CC5EF; } .btn-round.color3 { background-color:#FFB745; border-color:#FFB745; } .btn-round.color4 { background-color:#E7552C; border-color:#E7552C; } .btn.btn-round:focus, .btn.btn-round:hover { color:#fff; }