<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"> <h2>BUTTONS FOR BOOTSTRAP</h2> <button type="button" class="btn btn-default buttons textblack">Default</button> <button type="button" class="btn btn-primary buttons">Primary</button> <button type="button" class="btn btn-success buttons">Success</button> <button type="button" class="btn btn-info buttons">Info</button> <button type="button" class="btn btn-warning buttons ">Warning</button> <button type="button" class="btn btn-danger buttons red ">Danger</button> <button type="button" class="btn btn-link ">Link</button> </div> </div>

/************ BUTTONS CSS - MATERIAL TYPE ****************/ .buttons { text-align: center; display: inline-block; padding: 8px 30px; border-radius: 2px; letter-spacing: .5px; border-radius: 2px; text-decoration: none; color: #fff; overflow: hidden; position: relative; z-index: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .textblack { color:#1c1c1c; } /************ BACKGROUND COLOR FOR BUTTONS - MATERIAL TYPE ****************/ .red { background-color: #F44336; } .pink { background-color: #E91E63; } .blue { background-color: #2196F3; } .cyan { background-color: #00bcd4; } .teal { background-color: #009688; } .yellow { background-color: #FFEB3B; color: #000; } .orange { background-color: #FF9800; } .brown { background-color: #795548; } .grey { background-color: #9E9E9E; } .black { background-color: #000000; }