1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| a{ text-decoration: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; width: 400px; height: 100px; line-height: 100px; text-align: center; color: #fff; text-transform: uppercase; border-radius: 50px; z-index: 1; } a::before{ content: ""; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 50px; filter: blur(20px); z-index: -1; } a:hover::before{ animation: sun 8s infinite; } a:hover{ animation: sun 8s infinite; } @keyframes sun{ 100%{ background-position: -400% 0; } }
|