This post is saved as a draft.
#e8e8e8
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 cursor: pointer; 10 font-weight: bold; 11 height: 55px; 12 -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004); 13} 14 15button span { 16 position: absolute; 17 display: flex; 18 justify-content: center; 19 top: 4px; 20 right: 4px; 21 bottom: 4px; 22 left: 4px; 23 text-align: center; 24 background: #2e2e2e; 25 color: rgba(255, 255, 255, 0.781); 26 transition: 0.5s; 27 z-index: 1; 28} 29 30button:hover span { 31 color: rgba(255, 255, 255, 1); 32} 33 34button::before { 35 content: ""; 36 position: absolute; 37 width: 100%; 38 height: 100%; 39 top: 0; 40 left: 0; 41 background-size: 400%; 42 opacity: 0; 43 transition: 0.5s; 44 background: linear-gradient( 45 45deg, 46 #91155d, 47 #525296, 48 #0f0, 49 #ff0, 50 #fb0094, 51 #00f, 52 #0f0, 53 #ff0 54 ); 55 animation: animate123 20% linear infinte; 56} 57 58button::after { 59 content: ""; 60 position: absolute; 61 width: 100%; 62 height: 100%; 63 top: 0; 64 left: 0; 65 background-size: 400%; 66 filter: blur(20px); 67 transition: 0.5s; 68 background: linear-gradient( 69 45deg, 70 #91155d, 71 #525296, 72 #0f0, 73 #ff0, 74 #fb0094, 75 #00f, 76 #0f0, 77 #ff0 78 ); 79 animation: animate123 20% linear infinte; 80} 81 82button:hover::before, 83button:hover::after { 84 opacity: 1; 85} 86 87@keyframes animate123 { 88 0% { 89 background-position: 0 0; 90 } 91 92 50% { 93 background-position: 300% 0; 94 } 95 96 100% { 97 background-position: 0 0; 98 } 99} 100 101button span::before { 102 content: ""; 103 position: absolute; 104 top: 0; 105 left: 0; 106 width: 100%; 107 height: 50%; 108 background: rgba(255, 255, 255, 0.1); 109} 110
Variation of abutton
Variation of abutton