<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<div class="container">
<div class="text-center">
<div class="form-group"></div>
<h1>Material Design for Bootstrap</h1>
<hr />
<div class="form-group"></div>
<p class="null">Basic buttons</p>
<hr />
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>
<!-- Default button -->
<button type="button" class="btn btn-default waves-effect waves-light">Default</button>
<!-- Secondary button -->
<button type="button" class="btn btn-secondary waves-effect waves-light">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success waves-effect waves-light">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info waves-effect waves-light">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning waves-effect waves-light">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger waves-effect waves-light">Danger</button>
</div>
</div>
:root {
-btn-primary: #4285f4;
-btn-default: #2bbbad;
-btn-secondary: #a6c;
-btn-success: #00c851;
-btn-info: #33b5e5;
-btn-warning: #fb3;
-btn-danger: #ff3547;
}
body {
font-family: 'Roboto', sans-serif;
}
.null {
margin: 0;
}
.btn {
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
padding: .84rem 2.14rem;
font-size: .81rem;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
-o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
margin: .375rem;
border: 0;
-webkit-border-radius: .125rem;
border-radius: .125rem;
cursor: pointer;
text-transform: uppercase;
white-space: normal;
word-wrap: break-word;
color: #fff;
}
.btn:focus, .btn:hover {
text-decoration: none;
}
.btn:active, .btn:focus, .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
outline: 0;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.waves-effect {
position: relative;
cursor: pointer;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn-primary {
background-color: #4285f4!important;
color: #fff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
background-color: #0b51c5!important;
}
.btn-default {
background-color: #2bbbad!important;
color: #fff;
}
.btn-secondary {
background-color: #a6c!important;
color: #fff;
}
.btn-success {
background-color: #00c851!important;
color: #fff;
}
.btn-info {
background-color: #33b5e5!important;
color: #fff;
}
.btn-warning {
background-color: #fb3!important;
color: #fff;
}
.btn-danger {
background-color: #ff3547!important;
color: #fff;
}
