<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,user-scalable=0, initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; background-color: #000; } .box { display: grid; place-content: center; height: 100vh; } button { position: relative; margin: 15px; height: 60px; width: 300px; border-radius: 50px; border: none; outline: none; text-transform: uppercase; background-color: #111; cursor: pointer; color: white; } button:first-child:hover { background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; } button:last-child:hover { background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199); background-size: 400%; } button:first-child:before, button:last-child:before { content: ''; position: absolute; background: inherit; top: -5px; right: -5px; bottom: -5px; left: -5px; border-radius: 50px; filter: blur(10px); opacity: 0; transition: opacity .5s; } button:first-child:hover:before, button:last-child:hover:before { opacity: 1; z-index: -1; } button:hover { z-index: 1; animation: glow 5s linear infinite; } @keyframes glow { 0% { background-position: 0%; } 100% { background-position: 400%; } } </style> </head> <body> <div class="box"> <button>button</button> <button>button</button> </div> </body> </html>
