"Cool Button Hover Transition Effect With Bootstrap Responsive Buttons v.3.3"
Bootstrap 3.3.0 Snippet by developer_nirav

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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> <div class="container"> <div class=form-group></div> <h3 class=text-center>Button Box Shadow On Hover With Transition ☺</h3> <hr /> <div class=form-group></div> <div class="row text-center"> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Button Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Button Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-warning">Button Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Button Danger</button> </div> </div>
.btn{ margin-left:15px; padding: 10px 50px; border:0; text-transform: uppercase; font-size: 12px; text-align: center; color: #FFFFFF; border-radius: 4px; } .btn-primary{ background-color: #5390ff; transition:0.5s; } .btn-primary:hover{ background-color: #5390ff; box-shadow: 0 16px 26px -10px rgba(83,144,255, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(83,144,255, 0.2); } .btn-success{ background-color: #15db81; transition:0.5s; } .btn-success:hover{ background-color: #15db81; box-shadow: 0 16px 26px -10px rgba(21,219,129, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21,219,129, 0.2); } .btn-warning{ background-color: #e9c757; transition:0.5s; } .btn-warning:hover{ background-color: #e9c757; box-shadow: 0 16px 26px -10px rgba(233,199,87, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(233,199,87, 0.2); } .btn-danger{ background-color: #f96868; transition:0.5s; } .btn-danger:hover{ background-color: #f96868; box-shadow: 0 16px 26px -10px rgba(244, 67, 54, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2); }

Related: See More


Questions / Comments: