<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>
<body>
<div class="container">
<div class="title">
<h2>Basic Elements</h2>
</div>
<div id="buttons" class="cd-section">
<div class="title">
<h3>Buttons <br>
<small>Pick your style</small>
</h3>
</div>
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-round">
<i class="material-icons">favorite</i> With Icon
</button>
<button class="btn btn-primary btn-fab btn-round">
<i class="material-icons">favorite</i>
</button>
<button class="btn btn-primary btn-link">Simple</button>
</div>
</div>
<div class="title">
<h3><small>Pick your size</small></h3>
</div>
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary btn-lg">Large</button>
</div>
</div>
<div class="title">
<h3><small> Pick your color </small></h3>
</div>
<div class="row">
<div class="col-md-10 ml-auto">
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-rose">Rose</button>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
.h1, .h2, .h3, .h4, body, h1, h2, h3, h4, h5, h6 {
font-family: Roboto,Helvetica,Arial,sans-serif;
font-weight: 300 !important;
line-height: 1.5em !important;
}
.container .title{
color: #3c4858;
text-decoration: none;
margin-top: 30px;
margin-bottom: 25px;
min-height: 32px;
}
.container .title h2{
font-size: 36px;
}
.container .title h3{
font-size: 25px;
}
.container .title h3 small{
font-size: 75%;
color: #777;
}
#buttons .btn{
margin: 0 0 15px;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
#buttons .btn {
position: relative;
padding: 12px 30px;
margin: .3125rem 1px;
font-size: .75rem;
font-weight: 400;
line-height: 1.428571;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: .2rem;
outline: 0;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
will-change: box-shadow,transform;
}
#buttons .btn.btn-primary {
color: #fff;
background-color: #9c27b0;
border-color: #9c27b0;
box-shadow: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
}
#buttons .btn.btn-primary:hover {
color: #fff;
background-color: #9124a3;
border-color: #701c7e;
box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}
/*button styles*/
#buttons .btn.btn-round {
border-radius: 30px;
}
#buttons .btn .material-icons {
position: relative;
display: inline-block;
top: 0;
margin-top: -1em;
margin-bottom: -1em;
font-size: 1.1rem;
vertical-align: middle;
}
#buttons .btn.btn-fab.btn-round {
border-radius: 50%;
}
#buttons .btn.btn-fab {
font-size: 24px;
height: 41px;
min-width: 41px;
width: 41px;
padding: 0;
overflow: hidden;
position: relative;
line-height: 41px;
}
#buttons .btn.btn-primary.btn-link {
background-color: transparent;
color: #9c27b0;
box-shadow: none;
}
#buttons .btn.btn-primary.btn-link:hover {
background-color: transparent;
color: #9c27b0;
box-shadow: none;
}
/*button sizes*/
#buttons .btn.btn-sm {
padding: 6.5px 20px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
#buttons .btn.btn-lg{
padding: 18px 36px;
font-size: 14px;
line-height: 1.333333;
border-radius: 3px;
}
/*button colors*/
#buttons .btn.btn-default{
color: #fff;
background-color: #999;
border-color: #999;
box-shadow: 0 2px 2px 0 hsla(0,0%,60%,.14), 0 3px 1px -2px hsla(0,0%,60%,.2), 0 1px 5px 0 hsla(0,0%,60%,.12);
}
#buttons .btn.btn-default:hover{
box-shadow: 0 14px 26px -12px hsla(0,0%,60%,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px hsla(0,0%,60%,.2);
}
#buttons .btn.btn-info {
color: #fff;
background-color: #00bcd4;
border-color: #00bcd4;
box-shadow: 0 2px 2px 0 rgba(0,188,212,.14), 0 3px 1px -2px rgba(0,188,212,.2), 0 1px 5px 0 rgba(0,188,212,.12);
}
#buttons .btn.btn-info:hover{
box-shadow: 0 14px 26px -12px rgba(0,188,212,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,188,212,.2);
}
#buttons .btn.btn-success {
color: #fff;
background-color: #4caf50;
border-color: #4caf50;
box-shadow: 0 2px 2px 0 rgba(76,175,80,.14), 0 3px 1px -2px rgba(76,175,80,.2), 0 1px 5px 0 rgba(76,175,80,.12);
}
#buttons .btn.btn-success:hover{
box-shadow: 0 14px 26px -12px rgba(76,175,80,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(76,175,80,.2);
}
#buttons .btn.btn-warning {
color: #fff;
background-color: #ff9800;
border-color: #ff9800;
box-shadow: 0 2px 2px 0 rgba(255,152,0,.14), 0 3px 1px -2px rgba(255,152,0,.2), 0 1px 5px 0 rgba(255,152,0,.12);
}
#buttons .btn.btn-warning:hover{
box-shadow: 0 14px 26px -12px rgba(255,152,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(255,152,0,.2);
}
#buttons .btn.btn-danger {
color: #fff;
background-color: #f44336;
border-color: #f44336;
box-shadow: 0 2px 2px 0 rgba(244,67,54,.14), 0 3px 1px -2px rgba(244,67,54,.2), 0 1px 5px 0 rgba(244,67,54,.12);
}
#buttons .btn.btn-danger:hover{
box-shadow: 0 14px 26px -12px rgba(244,67,54,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(244,67,54,.2);
}
#buttons .btn.btn-rose {
color: #fff;
background-color: #e91e63;
border-color: #e91e63;
box-shadow: 0 2px 2px 0 rgba(233,30,99,.14), 0 3px 1px -2px rgba(233,30,99,.2), 0 1px 5px 0 rgba(233,30,99,.12);
}
#buttons .btn.btn-rose:hover{
box-shadow: 0 14px 26px -12px rgba(233,30,99,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(233,30,99,.2);
}
footer{
margin-top:100px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
margin: 0 0 10px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
