"Button shadow effect"
Bootstrap 4.1.1 Snippet by saikiran053

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Button Ripple Effect </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body class="index"> <div class="container-fluid margin"> <button href="https://www.behance.net/sakiran" target="_blank" class="themeBtn">Saikiran Netha's</button> </div> <div class="container-fluid margin"> <a class="themeBtn2">Saikiran Netha's</a> </div> <div class="container-fluid margin"> <a href="https://dribbble.com/saikiran053" target="_blank" class="themeBtn3">Follow @ Dribble</a> </div> <div class="container-fluid margin"> <a href="https://www.behance.net/sakiran" target="_blank" class="themeBtn4">Follow @ Behance</a> </div> </body> </html>
.margin{ margin-top:20px; margin-bottom:20px; } .themeBtn { background: #ff5c00; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } a:hover{ color: #ffffff; text-decoration:none; } .themeBtn:hover { background: rgb(255, 92, 0); color: #ffffff; box-shadow: 0 10px 25px -2px rgba(255, 92, 0, 0.6); } .themeBtn2 { background: #7600ff; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn2:hover { background: rgb(118, 0, 255); color: #ffffff; box-shadow: 0 10px 25px -2px rgba(118, 0, 255, 0.6); } .themeBtn3 { background: #ff2e4d; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn3:hover { background: rgb(255, 46, 77); color: #ffffff; box-shadow: 0 10px 25px -2px rgba(255, 46, 77, 0.6); } .themeBtn4 { background: #006eff; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn4:hover { background: rgb(0, 110, 255); color: #ffffff; box-shadow: 0 10px 25px -2px rgba(0, 110, 255, 0.6); }

Related: See More


Questions / Comments: