/* HTML */ <a href="#"><button class="button-17">Hover Me!</button></a> /* CSS */ .button-17 { padding: 10px 20px; border: none; outline: none; color: #FFF; font-family: inherit; font-weight: 500; font-size: 17px; cursor: pointer; position: relative; z-index: 0; border-radius: 12px; } .button-17::after { content: ""; z-index: -1; position: absolute; width: 100%; height: 100%; background-color: rgb(46, 46, 46); left: 0; top: 0; border-radius: 10px; } /* glow */ .button-17::before { content: ""; background: linear-gradient( 45deg, #FF0000, #002BFF, #FF00C8, #002BFF, #FF0000, #002BFF, #FF00C8, #002BFF ); position: absolute; top: -2px; left: -2px; background-size: 600%; z-index: -1; width: calc(100% + 4px); height: calc(100% + 4px); filter: blur(8px); animation: glowing 20s linear infinite; transition: opacity .3s ease-in-out; border-radius: 10px; opacity: 0; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } /* hover */ .button-17:hover::before { opacity: 1; } .button-17:active:after { background: transparent; } .button-17:active { color: #000; font-weight: bold; }
0 Comments