<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 ---------->
<section class="py-60">
<div class="container">
<div class="row Button-collection">
<div class="col-md-12 mb-4 mt-4 ">
<h4 class="mb-4 text-center"> Square Button</h4>
<div class="text-center">
<button type="button" class="btn btn-primary btn-shadow">Primary</button>
<button type="button" class="btn btn-success btn-shadow">Success</button>
<button type="button" class="btn btn-danger btn-shadow">Danger</button>
<button type="button" class="btn btn-warning btn-shadow">Warning</button>
<button type="button" class="btn btn-info btn-shadow">Info</button>
<button type="button" class="btn btn-light btn-shadow">Light</button>
</div>
</div>
<div class="col-md-12 mb-4 mt-4">
<h4 class="mb-3 text-center"> Without shadow Button</h4>
<div class="text-center">
<button type="button" class="btn btn-primary ">Primary</button>
<button type="button" class="btn btn-success ">Success</button>
<button type="button" class="btn btn-danger ">Danger</button>
<button type="button" class="btn btn-warning ">Warning</button>
<button type="button" class="btn btn-info ">Info</button>
<button type="button" class="btn btn-light">Light</button>
</div>
</div>
<div class="col-md-12 mb-4 mt-4">
<h4 class="mb-3 text-center"> Round Button</h4>
<div class=" text-center">
<button type="button" class="btn btn-primary btn-shadow pill-button">Primary</button>
<button type="button" class="btn btn-success btn-shadow pill-button">Success</button>
<button type="button" class="btn btn-danger btn-shadow pill-button">Danger</button>
<button type="button" class="btn btn-warning btn-shadow pill-button">Warning</button>
<button type="button" class="btn btn-info btn-shadow pill-button">Info</button>
<button type="button" class="btn btn-light btn-shadow pill-button">Light</button>
</div>
</div>
<div class="col-md-12 mb-4 mt-4">
<h4 class="mb-3 text-center"> Without shadow Button</h4>
<div class="text-center">
<button type="button" class="btn btn-primary pill-button">Primary</button>
<button type="button" class="btn btn-success pill-button">Success</button>
<button type="button" class="btn btn-danger pill-button">Danger</button>
<button type="button" class="btn btn-warning pill-button">Warning</button>
<button type="button" class="btn btn-info pill-button">Info</button>
<button type="button" class="btn btn-light pill-button">Light</button>
</div>
</div>
<div class="col-md-12 mb-4 mt-4">
<h4 class="mb-3 text-center"> Gradient Button</h4>
<div class="text-center">
<button type="button" class="btn gradient gradient-one">Primary
</button>
<button type="button" class="btn gradient gradient-two">Success</button>
<button type="button" class="btn gradient gradient-three">Danger</button>
<button type="button" class="btn gradient gradient-four">Warning</button>
<button type="button" class="btn gradient gradient-five">Info</button>
<button type="button" class="btn gradient gradient-six">Light</button>
</div>
</div>
</div>
</div>
</section>
/*****************************
-- Created by top10theme.com
*****************************/
/*****************************
-- BUTTONS
*****************************/
button:focus {
outline: none;
box-shadow: none;
}
button {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.Button-collection button {
margin-left: 6px;
}
.pill-button {
border-radius: 50px;
}
.btn {
font-size: 1rem;
position: relative;
line-height: 45px;
padding: 0 2.5rem;
letter-spacing: 0.5px;
min-width: 150px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: none;
}
/******* btn-primary *******/
.btn-primary {
color: #fff;
background-color: #0000ff;
border-color: #0000ff;
}
.btn-primary.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(0 0 255 / 81%) !important;
box-shadow: 0 5px 15px -4px rgb(0 0 255 / 81%) !important;
}
/******* btn-success *******/
.btn-success {
color: #fff;
background-color: #4CAF50;
border-color: #4CAF50;
}
.btn-success.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(76 175 80) !important;
box-shadow: 0 5px 15px -4px rgb(76 175 80) !important;
}
/******* btn-danger *******/
.btn-danger {
color: #fff;
background-color: #ff6660;
border-color: #ff6660;
}
.btn-danger.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(255 102 96 / 81%) !important;
box-shadow: 0 5px 15px -4px rgb(255 102 96 / 81%) !important;
}
/******* btn-warning *******/
.btn-warning {
color: #ffffff;
background-color: #FF9800;
border-color: #FF9800;
}
.btn-warning.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(255 152 0 / 81%) !important;
box-shadow: 0 5px 15px -4px rgb(255 152 0 / 81%) !important;
}
.btn-warning:hover,
.btn-warning:focus {
color: #ffffff;
background-color: #EF6C00;
border-color: #EF6C00;
}
/******* btn-info *******/
.btn-info {
color: #ffffff;
background-color: #0dd3ff;
border-color: #0dd3ff;
}
.btn-info.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(13 211 255 / 81%) !important;
box-shadow: 0 5px 15px -4px rgb(13 211 255 / 81%) !important;
}
/******* btn-light *******/
.btn-light {
color: #ffffff;
background-color: #c136d9;
border-color: #c136d9;
}
.btn-light.btn-shadow {
-webkit-box-shadow: 0 5px 15px -4px rgb(193 54 217 / 81%) !important;
box-shadow: 0 5px 15px -4px rgb(193 54 217 / 81%) !important;
}
.btn-light:hover,
.btn-light:focus {
color: #ffffff;
background-color: #a72abd;
border-color: #a72abd;
}
.gradient {
display: inline-block;
color: #fff;
outline: none !important;
text-align: center;
cursor: pointer;
letter-spacing: 0.5px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.gradient:hover {
background-position: right center;
color: #fff;
}
.gradient-one {
background: linear-gradient(to right, #1345e6 0%, #ed239f 51%, #1345e6 100%);
background-size: 200% auto;
}
.gradient-two {
background: linear-gradient(to right, #38ef7d 0%, #11998e 51%, #38ef7d 100%);
background-size: 200% auto;
}
.gradient-three {
background: linear-gradient(to right, #9C27B0 0%, #ff6660 51%, #9C27B0 100%);
background-size: 200% auto;
}
.gradient-four {
background: linear-gradient(to right, #ff9800 0%, #F44336 51%, #ff9800 100%);
background-size: 200% auto;
}
.gradient-five {
background: linear-gradient(to right, #3F51B5 0%, #0dd3ff 51%, #3F51B5 100%);
background-size: 200% auto;
}
.gradient-six {
background: linear-gradient(to right, #2196F3 0%, #c136d9 51%, #2196F3 100%);
background-size: 200% auto;
}
