3.5K views
1button { 2 position: relative; 3 text-decoration: none; 4 font-size: 15px; 5 text-transform: uppercase; 6 letter-spacing: 5px; 7 line-height: 48px; 8 width: 160px; 9 font-weight: bold; 10 height: 55px; 11 -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004); 12} 13 14button span { 15 position: absolute; 16 display: flex; 17 justify-content: center; 18 top: 4px; 19 right: 4px; 20 bottom: 4px; 21 left: 4px; 22 text-align: center; 23 background: #2E2E2E; 24 color: rgba(255, 255, 255, 0.781); 25 transition: 0.5s; 26 z-index: 1; 27} 28 29button:hover span { 30 color: rgba(255,255,255,1); 31} 32 33button::before { 34 content: ''; 35 position: absolute; 36 width: 100%; 37 height: 100%; 38 top: 0; 39 left: 0; 40 background-size: 400%; 41 opacity: 0; 42 transition: 0.5s; 43 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0); 44 animation: animate123 20% linear infinte; 45} 46 47button::after { 48 content: ''; 49 position: absolute; 50 width: 100%; 51 height: 100%; 52 top: 0; 53 left: 0; 54 background-size: 400%; 55 filter: blur(20px); 56 transition: 0.5s; 57 background: linear-gradient(45deg,#91155d,#525296,#0f0,#ff0,#fb0094,#00f,#0f0,#ff0); 58 animation: animate123 20% linear infinte; 59} 60 61button:hover::before, 62button:hover::after { 63 opacity: 1; 64} 65 66@keyframes animate123 { 67 0% { 68 background-position: 0 0; 69 } 70 71 50% { 72 background-position: 300% 0; 73 } 74 75 100% { 76 background-position: 0 0; 77 } 78} 79 80button span::before { 81 content: ''; 82 position: absolute; 83 top: 0; 84 left: 0; 85 width: 100%; 86 height: 50%; 87 background: rgba(255,255,255,0.1); 88}
MIT License