"Buttons Colors"
Bootstrap 3.0.3 Snippet by janine

<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"> <div class="col-md-4"> <h3>Button <span class="semi-bold">Colors</span></h3> <p>Basic buttons are traditional buttons with borders and background. Use any of the available button classes to quickly create a styled button. Compatible for bootstrap version 2 and 3.</p> <br> <!-- Standard gray button with gradient --> <button type="button" class="btn btn-default btn-cons">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary btn-cons">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success btn-cons">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info btn-cons">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning btn-cons">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger btn-cons">Danger</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-white btn-cons">White</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link btn-cons">Link</button> </div> </div> </div>
.btn { display: inline-block; padding: 9px 12px; padding-top: 7px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: #5e5e5e; text-align: center; vertical-align: middle; cursor: pointer; background-color: #d1dade; -webkit-border-radius: 3px; -webkit-border-radius: 3px; -webkit-border-radius: 3px; background-image: none !important; border: none; text-shadow: none; box-shadow: none; transition: all 0.12s linear 0s !important; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; } .btn-cons { margin-right: 5px; min-width: 120px; margin-bottom: 8px; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-primary { color: #fff; background-color: #428bca; border-color: #357ebd; } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .btn-white { color: #5e5e5e; background-color: #fff; border: 1px solid #e5e9ec; } .btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; } .btn-link { color: #5e5e5e; background-color: transparent; border: none; } .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; } .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { text-shadow: 0 -1px 0 rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075); }

Related: See More


Questions / Comments: