Button by kirzin
#212121
1button { 2 text-decoration: none; 3 position: relative; 4 border: none; 5 font-size: 14px; 6 font-family: inherit; 7 cursor: pointer; 8 color: #fff; 9 width: 9em; 10 height: 3em; 11 line-height: 2em; 12 text-align: center; 13 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 14 background-size: 300%; 15 border-radius: 30px; 16 z-index: 1; 17} 18 19button:hover { 20 animation: ani 8s linear infinite; 21 border: none; 22} 23 24@keyframes ani { 25 0% { 26 background-position: 0%; 27 } 28 29 100% { 30 background-position: 400%; 31 } 32} 33 34button:before { 35 content: ""; 36 position: absolute; 37 top: -5px; 38 left: -5px; 39 right: -5px; 40 bottom: -5px; 41 z-index: -1; 42 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 43 background-size: 400%; 44 border-radius: 35px; 45 transition: 1s; 46} 47 48button:hover::before { 49 filter: blur(20px); 50} 51 52button:active { 53 background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); 54} 55
39K views
39K views
Adidem23 12. August 2023. at 18:44
12. August 2023. at 18:44
Incredible
MIT License