Button by Wendell47
#e8e8e8
1.button { 2 display: inline-flex; 3 align-items: center; 4 justify-content: center; 5 padding: 15px 30px; 6 border: 0; 7 position: relative; 8 overflow: hidden; 9 border-radius: 10rem; 10 transition: all 0.02s; 11 font-weight: bold; 12 color: rgb(37, 37, 37); 13 z-index: 0; 14 box-shadow: 0 0px 7px -5px rgba(0, 0, 0, 0.5); 15} 16 17.button:hover { 18 background: rgb(193, 228, 248); 19 color: rgb(33, 0, 85); 20} 21 22.button:active { 23 transform: scale(0.97); 24} 25 26.hoverEffect { 27 position: absolute; 28 bottom: 0; 29 top: 0; 30 left: 0; 31 right: 0; 32 display: flex; 33 align-items: center; 34 justify-content: center; 35 z-index: 1; 36} 37 38.hoverEffect div { 39 background: rgb(222,0,75); 40 background: linear-gradient(90deg, rgba(222,0,75,1) 0%, rgba(191,70,255,1) 49%, rgba(0,212,255,1) 100%); 41 border-radius: 40rem; 42 width: 10rem; 43 height: 10rem; 44 transition: 0.4s; 45 filter: blur(20px); 46 animation: effect infinite 3s linear; 47 opacity: 0.5; 48} 49 50.button:hover .hoverEffect div { 51 width: 8rem; 52 height: 8rem; 53} 54 55@keyframes effect { 56 57 0% { 58 transform: rotate(0deg); 59 } 60 61 100% { 62 transform: rotate(360deg); 63 } 64}
8.6K views
8.6K views
MIT License