"Button Pulse Effects on Hover"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <a href="#">Button</a> </div>
body{ margin: 0; padding: 0; font-family: sans-serif; background:#897844; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; padding: 10px 15px; border: 1px solid #fff; color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 2px; transition: .5s; text-align:center; width:150px; height:50px; } a:hover { background:darkblue; color: #fff; text-decoration: none; } a:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: transparent; border: 1px solid #262626; } a:hover:before { transform: scale(1.2,1.4); opacity: 0; transition: .5s; }

Related: See More


Questions / Comments: