<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <br> <h3>Solid Buttons</h3> <p>Add the class <code>.btn</code> to any link</p> <a href="#" class="btn btn-primary">Primary Button</a> <a href="#" class="btn btn-success">Success Button</a> <a href="#" class="btn btn-info">Info Button</a> <a href="#" class="btn btn-warning">Warning Button</a> <a href="#" class="btn btn-danger">Danger Button</a> <a href="#" class="btn btn-default">Default Button</a> <br> <br> </div> </div> <div class="container"> <div class="row"> <br> <h3>Rounded Outline Buttons</h3> <p>Add the class <code>.btn</code> to any link</p> <p>Then add the class <code>.btn-outline</code></p> <a class="btn btn-primary btn-outline">Primary Button</a> <a class="btn btn-success btn-outline">Success Button</a> <a class="btn btn-info btn-outline">Info Button</a> <a class="btn btn-warning btn-outline">Warning Button</a> <a class="btn btn-danger btn-outline">Danger Button</a> <a class="btn btn-default btn-outline">Default Button</a> <br> <br> </div> </div> <div class="container"> <div class="row"> <br> <h3>Square Outline Buttons</h3> <p>Add the class <code>.btn</code> to any link</p> <p>Then add the classes <code>.btn-outline</code>, <code>.btn-square</code></p> <a class="btn btn-primary btn-outline btn-square">Primary Button</a> <a class="btn btn-success btn-outline btn-square">Success Button</a> <a class="btn btn-info btn-outline btn-square">Info Button</a> <a class="btn btn-warning btn-outline btn-square">Warning Button</a> <a class="btn btn-danger btn-outline btn-square">Danger Button</a> <a class="btn btn-default btn-outline btn-square">Default Button</a> <br> <br> </div> </div> <div class="container"> <div class="row"> <br> <h3>Circle Outline Buttons</h3> <p>Add the class <code>.btn</code> to any link</p> <p>Then add the classes: <code>.btn-outline</code>, <code>.btn-circle</code></p> <a type="button" class="btn btn-primary btn-outline btn-circle"><i class="glyphicon glyphicon-home"></i></a> <a type="button" class="btn btn-success btn-outline btn-circle"><i class="glyphicon glyphicon-user"></i></a> <a type="button" class="btn btn-info btn-outline btn-circle"><i class="glyphicon glyphicon-gift"></i></a> <a type="button" class="btn btn-warning btn-outline btn-circle"><i class="glyphicon glyphicon-comment"></i></a> <a type="button" class="btn btn-danger btn-outline btn-circle"><i class="glyphicon glyphicon-ok"></i></a> <a type="button" class="btn btn-default btn-outline btn-circle"><i class="fa fa-ticket"></i></span></a> <br> <br> </div> </div> <div class="container"> <div class="row"> <br> <h3>Circle Outline Buttons with Color Cycle</h3> <p>Add the class <code>.btn</code> to any link</p> <p>Then add the classes: <code>.btn-outline</code>, <code>.btn-circle</code></p> <a type="button" class="btn btn-primary btn-outline btn-circle colorCycle-Primary"><i class="glyphicon glyphicon-home"></i></a> <a type="button" class="btn btn-success btn-outline btn-circle colorCycle"><i class="glyphicon glyphicon-user"></i></a> <a type="button" class="btn btn-info btn-outline btn-circle colorCycle"><i class="glyphicon glyphicon-gift"></i></a> <a type="button" class="btn btn-warning btn-outline btn-circle colorCycle"><i class="glyphicon glyphicon-comment"></i></a> <a type="button" class="btn btn-danger btn-outline btn-circle colorCycle"><i class="glyphicon glyphicon-ok"></i></a> <a type="button" class="btn btn-default btn-outline btn-circle colorCycle"><span style="color: #b5b5b5;"><i class="fa fa-ticket"></i></span></a> <br> <br> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); .btn-default { color: #222222; border-color: #222222; } .btn-outline { background-color: transparent; color: inherit; border-width: 2px; -webkit-transition: all 0.75s; -moz-transition: all 0.75s; transition: all 0.75s; } .btn-outline.btn-square { border-radius: 0; } .btn-outline.btn-primary { color: #428bca; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #f0ad4e; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; } .btn-default.btn-outline:hover { color: #666666; } .btn-circle { width: 45px; height: 45px; text-align: center; padding: 8px 10px; font-size: 20px; line-height: 1.33; border-radius: 30px; } .colorCycle-Primary { background-color: #ffffff; border-width: 2px; color: #FFF; animation-name: primary-color; animation-duration:6s; animation-direction:alternate; animation-iteration-count:infinite; -webkit-animation-name: primary-color; -webkit-animation-duration:6s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; } @keyframes primary-color { 0% {background-color: #3276B1;} 25% {background-color: #255884;} 50% {background-color: #99BBD8;} 75% {background-color: #255884;} } @-webkit-keyframes Primary { 0% {background-color: #3276B1;} 25% {background-color:#255884;} 50% {background-color:#99BBD8;} 75% {background-color:#255884;} } .colorCycle { background-color: #ffffff; border-width: 2px; color: #FFF; animation-name: homeCycle; animation-duration:6s; animation-direction:alternate; animation-iteration-count:infinite; -webkit-animation-name: homeCycle; -webkit-animation-duration:6s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; } @keyframes homeCycle { 0% {background-color:#3276B1} 25% {background-color:#255884;} 50% {background-color:#CC3200;} 75% {background-color: #47a447;} } @-webkit-keyframes homeCycle { 0% {background-color:#006;} 25% {background-color:#060;} 50% {background-color:#CC3200;} 75% {background-color:#603;} }