/* HTML */ <a href="#"><button class="button-06" role="button">Click here</button></a> /* CSS */ .button-06 { padding: 0.8em 2em; border: none; outline: none; color: rgb(255, 255, 255); background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 5px; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-06:before { content: ""; background: linear-gradient( 45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 ); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); -webkit-filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing-button-06 20s linear infinite; transition: opacity 0.3s ease-in-out; border-radius: 5px; } @keyframes glowing-button-06 { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .button-06:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: #222; left: 0; top: 0; border-radius: 5px; }
0 Comments