Button by flxderdev
#e8e8e8
1.button { 2 height: 55px; 3 width: 175px; 4 margin: auto; 5 align-items: center; 6 border-radius: 50px; 7 border: none; 8 text-align: center; 9 color: transparent; 10 text-shadow: 0 0 0 rgb(255, 255, 255); 11 font-size: 17px; 12 font-weight: 500; 13 text-transform: uppercase; 14 text-decoration: none; 15 box-sizing: border-box; 16 cursor: pointer; 17 transition: transform 50ms ease; 18 background: linear-gradient(90deg, #fdec53, #f441a5, #b81fff, #5f03f4); 19 background-size: 400%; 20 animation: welcome 0.5s ease 0s 1 normal forwards; 21 display: block; 22 margin-right: auto; 23 margin-left: auto; 24 font-family: "Montserrat", sans-serif; 25} 26 27.button:hover { 28 -webkit-box-shadow: 0px 0px 15px 0px rgba(230, 219, 67, 0.9); 29 -moz-box-shadow: 0px 0px 15px 0px rgba(224, 178, 78, 0.9); 30 box-shadow: 0px 0px 15px 0px rgba(212, 133, 109, 0.9); 31 animation: animate 8s ease infinite; 32 transition: box-shadow, 0.4s; 33 border: none; 34 font-size: 19px; 35 transform: scale(1.05, 1.05); 36 background: linear-gradient(90deg, #fdec53, #cc5e4a, #dfad41, #fdec53); 37 background-size: 400%; 38} 39 40@keyframes animate { 41 0% { 42 background-position: 0%; 43 } 44 45 100% { 46 background-position: 400%; 47 } 48} 49 50@keyframes spin { 51 0% { 52 --rotate: 0deg; 53 } 54 55 100% { 56 --rotate: 360deg; 57 } 58} 59 60.button:hover:before { 61 filter: blur(20px); 62 opacity: 1; 63 animation: animate 8s linear infinite; 64} 65
323 views
Variation of abutton
MIT License