"Buttons"
Bootstrap 3.0.3 Snippet by silentcoding

<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; text-align: center; padding: 50px 0px; } 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; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-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; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-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); -webkit-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -moz-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -ms-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -o-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); -webkit-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -moz-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -ms-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -o-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); -webkit-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -moz-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -ms-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -o-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); } .effect-btn .btn5:hover { color: #FFF; box-shadow: rgba(249, 105, 14,0.7) 0 55px 0px 2px inset; } .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); -webkit-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -moz-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -ms-transition: all 300ms cubic-bezier(0.4, 0.500, 0.5, 1.5); -o-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; }

Related: See More


Questions / Comments: