buttons style : demo 65

HTML

CSS

                        .demo{ text-align: center; }
                        .button{
                            display: inline-block;
                            padding: 16px 40px;
                            background: #ff52a2;
                            border-radius: 100px;
                            font-size: 18px;
                            color: #fff;
                            text-transform: uppercase;
                            overflow: hidden;
                            position: relative;
                        }
                        .button:hover{ color: #fff; }
                        .button:before{
                            content: "";
                            background: radial-gradient(circle closest-side, #e29217, transparent);
                            --size: 0;
                            width: var(--size);
                            height: var(--size);
                            position: absolute;
                            top: var(--y);
                            left: var(--x);
                            transform: translate(-50%, -50%);
                            transition: width .2s ease, height .2s ease;
                        }
                        .button:hover:before{ --size: 200px; }
                        .button span{
                            pointer-events: none;
                            position: relative;
                        }
                    

JavaScript

                        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');
                        };
                    
License Terms