HTML
CSS
JS
Run
HOVER ME!
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body{ background-color: #000; text-align: center; min-height: 270px; display: flex; align-items: center; justify-content: center; font-family: "Open Sans"; } .btn-glow { padding: 15px 35px; min-width: 250px; border-radius: 100px; color: #fff; background: #141414; cursor: pointer; position: relative; z-index: 0; font-size: 16px; } .btn-glow:before { content: ''; background: linear-gradient(320deg, #e91e63, #ff5722, #ffeb3b, #b9ff68, #0fac81, #084298, #771afe, #970374, #e91e63); position: absolute; top: -4px; left: -4px; background-size: 500%; z-index: -1; filter: blur(5px); width: calc(100% + 8px); height: calc(100% + 8px); animation: btn-glowing 15s linear infinite; opacity: 0; transition: opacity .5s ease-in-out; border-radius: 100px; } .btn-glow:hover:before { opacity: 1; } .btn-glow:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #141414; left: 0; top: 0; border-radius: 100px; } @keyframes btn-glowing { 0% { background-position: 0 0; } 50% { background-position: 500% 0; } 100% { background-position: 0 0; } }
Press Ctrl+Space Key for Auto complete and Intelli Sense