<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 ----------> <button class="button"> <span>Hover me I'm awesome</span> </button>

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: white; } .button { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f72359; padding: 1em 2em; border: none; color: white; font-size: 1.2em; cursor: pointer; outline: none; overflow: hidden; border-radius: 100px; } .button span { position: relative; pointer-events: none; } .button::before { --size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #4405f7, transparent); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } .button:hover::before { --size: 400px; }

document.querySelector('.button').onmousemove = function (e) { var x = e.pageX - e.target.offsetLeft; var y = e.pageY - e.target.offsetTop; e.target.style.setProperty('--x', x + 'px'); e.target.style.setProperty('--y', y + 'px'); };