<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<section class="shadow-btn">
<div class="container">
<div class="row text-center">
<div class="btn-heading">
<h1>Shadow Buttons</h1>
</div>
<a class="btn1" href="#">Learn More</a>
<a class="btn2" href="#">Read More</a>
<a class="btn3" href="#">Click</a>
</div>
</div>
</section>
<section class="gradient-btn">
<div class="container">
<div class="row text-center">
<div class="btn-heading">
<h1>Gradient Buttons</h1>
</div>
<a class="btn1" href="#">Learn More</a>
<a class="btn2" href="#">Read More</a>
<a class="btn3" href="#">Click</a>
</div>
</div>
</section>
<section class="border-btn">
<div class="container">
<div class="row text-center">
<div class="btn-heading">
<h1>Border Buttons</h1>
</div>
<a class="btn1" href="#">Learn More</a>
<a class="btn2" href="#">Read More</a>
<a class="btn3" href="#">Click</a>
<a class="btn4" href="#">Learn More</a>
<a class="btn5" href="#">Read More</a>
</div>
</div>
</section>
<section class="effect-btn">
<div class="container">
<div class="row text-center">
<div class="btn-heading">
<h1>Effect Buttons</h1>
</div>
<a class="btn1" href="#">Learn More</a>
<a class="btn2" href="#">Read More</a>
<a class="btn3" href="#">Learn More</a>
<a class="btn4" href="#">Read More</a>
<a class="btn5" href="#">Learn More</a>
<a class="btn6" href="#">Read More</a>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
body {
background: #f2f2f2;
font-family: 'Josefin Sans', sans-serif;
}
a,
a:hover {
text-decoration: none;
text-transform: uppercase;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
padding: 50px 0;
text-align: center;
}
section {
margin: 50px 0px;
}
.shadow-btn .btn1 {
text-transform: uppercase;
color: #fff;
border-radius: 4px;
font-size: 13px;
background: #26A65B;
padding: 15px 25px;
box-shadow: 2px 5px 10px rgba(22, 22, 22, 0.1);
}
.shadow-btn .btn2 {
text-transform: uppercase;
color: #fff;
border-radius: 4px;
font-size: 13px;
background:#FABE58;
padding:15px 25px;
box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 0.8);
}
.shadow-btn .btn2 {
text-transform: uppercase;
color: #fff;
border-radius: 4px;
font-size: 13px;
background:#FABE58;
padding:15px 25px;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.shadow-btn .btn3 {
text-transform: uppercase;
color: #fff;
border-radius: 4px;
font-size: 13px;
background:#3498DB;
padding:15px 25px;
box-shadow: inset 0 0 60px 2px rgba(0, 0, 0, 0.8);
}
.gradient-btn .btn1 {
background: linear-gradient(to right, #00b09b, #96c93d);
color: #FFF;
font-size: 16px;
padding:25px 60px;
}
.gradient-btn .btn2 {
background-image: linear-gradient(to right, #EC6F66 0%, #F3A183 51%, #EC6F66 100%);
color: #FFF;
font-size: 16px;
padding:25px 60px;
}
.gradient-btn .btn3 {
background-image: linear-gradient(to right, #5f2c82 0%, #49a09d 51%, #5f2c82 100%);
color: #FFF;
font-size: 16px;
padding:25px 70px;
}
.border-btn .btn1 {
text-transform: uppercase;
color: #FABE58;
font-size: 13px;
border: 2px solid #FABE58;
padding: 20px 40px;
}
.border-btn .btn1:hover {
color: #FFF;
background:#FABE58;
}
.border-btn .btn2 {
text-transform: uppercase;
color: #4183D7;
border: 2px solid #4183D7;
font-size: 13px;
padding: 20px 40px;
box-shadow: 0 2px #4183D7;
}
.border-btn .btn2:hover {
color: #FFF;
background:#4183D7;
}
.border-btn .btn3 {
text-transform: uppercase;
color: #F64747;
border: 2px solid #F64747;
font-size: 13px;
padding: 20px 55px;
border-radius: 50px;
}
.border-btn .btn3:hover {
color: #FFF;
background: #F64747;
}
.border-btn .btn4 {
text-transform: uppercase;
color: #00E640;
border: 2px solid #00E640;
font-size: 13px;
padding: 20px 40px;
border-radius: 50px;
}
.border-btn .btn4:hover{
color: #FFF;
background: #00E640;
}
.border-btn .btn5 {
text-transform: uppercase;
color: #89C4F4;
border: 2px solid #89C4F4;
font-size: 13px;
border-radius: 50%;
padding: 60px 25px;
}
.border-btn .btn5:hover {
color: #FFF;
background: #89C4F4;
}
.effect-btn .btn1 {
text-transform: uppercase;
color: #4183D7;
border: 2px solid #4183D7;
font-size: 13px;
padding: 20px 30px;
}
.effect-btn .btn1:hover{
color: #FFF;
background: #4183D7;
padding: 25px 30px;
transition: all 1s ease-out;
}
.effect-btn .btn2 {
text-transform: uppercase;
color: #F64747;
border: 2px solid #F64747;
font-size: 13px;
padding: 20px 35px;
}
.effect-btn .btn2:hover{
background: #F64747;
padding: 15px 35px;
transition: all 1s ease-out;
}
.effect-btn .btn3 {
text-transform: uppercase;
font-size: 13px;
padding: 20px 45px;
border: 2px solid #BF55EC;
color: #BF55EC;
box-shadow: rgba(191, 85, 236, 0.4) 0 0px 0px 2px inset;
transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5);
}
.effect-btn .btn3:hover {
color:#FFF;
box-shadow: rgba(191, 85, 236, 0.7) 0 0px 0px 30px inset;
}
.effect-btn .btn4 {
text-transform: uppercase;
font-size: 13px;
padding: 20px 45px;
border: 2px solid #00E640;
color: #00E640;
box-shadow: rgba(0,230,64,0.4) 0 0px 0px 2px inset;
transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5);
}
.effect-btn .btn4:hover {
color: #FFF;
box-shadow: rgba(0,230,64,0.7) 0 0px 120px 2px inset;
}
.effect-btn .btn5 {
text-transform: uppercase;
font-size: 13px;
padding: 20px 45px;
border: 2px solid #F9690E;
color: #F9690E;
box-shadow: rgba(249, 105, 14,0.4) 0 0px 0px 2px inset;
transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5);
}
.effect-btn .btn5:hover {
box-shadow: rgba(249, 105, 14,0.7) 0 55px 0px 2px inset;
color: #FFF;
}
.effect-btn .btn6 {
text-transform: uppercase;
font-size: 13px;
padding: 20px 45px;
border: 2px solid #89C4F4;
color: #89C4F4;
box-shadow: rgba(137, 196, 244,0.4) 0 0px 0px 2px inset;
transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5);
}
.effect-btn .btn6:hover {
color: #FFF;
box-shadow: rgba(137, 196, 244,0.7) 170px 0px 0px 2px inset;
}
