Fancy Button

Click Here For Full Screen

.fancy-button{display:inline-block;padding:15px 30px;background:linear-gradient(45deg,#ff6b6b,#5f27cd,#1dd1a1);background-size:200% 200%;color:#fff;font-family:'Arial',sans-serif;font-size:18px;font-weight:bold;text-decoration:none;border-radius:50px;border:none;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.2);transition:all .5s ease;text-align:center;animation:gradientShift 5s ease infinite;position:relative;overflow:hidden}.fancy-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}.fancy-button:active{transform:translateY(1px)}.fancy-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.fancy-button:hover::before{left:100%}@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#f5f6fa}