Button by MuhammadHasann
#212121
1button { 2 position: relative; 3 padding: 0; 4 width: 135px; 5 height: 65px; 6 background: transparent; 7 font-size: 17px; 8 border: 1px solid #ffffff1c; 9 border-radius: 8px; 10 box-shadow: inset 0 0 10px #ffffff1c; 11} 12 13button::before { 14 content: ""; 15 position: absolute; 16 top: 50%; 17 left: 50%; 18 transform: translate(-50%, -50%); 19 width: 135px; 20 height: 65px; 21 background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%); 22 /* background-size: 200%; */ 23 background-repeat: no-repeat; 24 filter: opacity(.3) blur(.3em); 25} 26 27button::after { 28 content: ""; 29 position: absolute; 30 top: 120%; 31 left: 0; 32 transform: perspective(1.5em) rotateX(35deg) scale(1, .6); 33 height: 100%; 34 width: 100%; 35 background-color: #fbfd7b; 36 filter: blur(2em); 37 opacity: 0; 38 pointer-events: none; 39} 40 41button p { 42 display: inline-block; 43 width: 135px; 44 line-height: 65px; 45 font-size: 17px; 46 font-weight: 900; 47 color: #d6d6d6; 48 filter: blur(.02em); 49 z-index: 5; 50} 51 52button .svg-1 { 53 position: absolute; 54 top: 50%; 55 left: 20%; 56 transform: translate(0, -50%) rotate(45deg); 57 width: 2.5rem; 58 height: auto; 59 filter: blur(.1rem) opacity(.5); 60 z-index: -5; 61} 62 63.fil0 { 64 fill: #935E28 65} 66 67button:hover { 68 filter: blur(.05em); 69 animation: lightBox 1s ease-in-out forwards; 70} 71 72button:hover::after { 73 animation: light 1s ease-in-out forwards; 74} 75 76button:hover p { 77 animation: lightText 1s ease-in-out forwards; 78} 79 80@keyframes lightBox { 81 0% { 82 border: 1px solid #fbfd7b; 83 box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a; 84 } 85 86 20% { 87 border: 1px solid #ffffff1c; 88 box-shadow: none; 89 } 90 91 30% { 92 border: 1px solid #fbfd7b; 93 box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a; 94 } 95 96 38% { 97 border: 1px solid #ffffff1c; 98 box-shadow: none; 99 } 100 101 45% { 102 border: 1px solid #fbfd7b; 103 box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a; 104 } 105 106 50% { 107 border: 1px solid #ffffff1c; 108 box-shadow: none; 109 } 110 111 53% { 112 border: 1px solid #fbfd7b; 113 box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a; 114 } 115 116 65% { 117 border: 1px solid #ffffff1c; 118 box-shadow: none; 119 } 120 121 100% { 122 border: 1px solid #fbfd7b; 123 box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a; 124 } 125} 126 127@keyframes light { 128 0% { 129 opacity: .7; 130 } 131 132 20% { 133 opacity: 0; 134 } 135 136 30% { 137 opacity: .7; 138 } 139 140 38% { 141 opacity: 0; 142 } 143 144 45% { 145 opacity: .7; 146 } 147 148 50% { 149 opacity: 0; 150 } 151 152 53% { 153 opacity: .7; 154 } 155 156 65% { 157 opacity: 0; 158 } 159 160 100% { 161 opacity: .7; 162 } 163} 164 165@keyframes lightText { 166 0% { 167 color: #fbfd7b; 168 text-shadow: 0 0 5px #fbfd7b8a; 169 } 170 171 20% { 172 color: #ffffff; 173 text-shadow: none; 174 } 175 176 30% { 177 color: #fbfd7b; 178 text-shadow: 0 0 10px #fbfd7b8a; 179 } 180 181 38% { 182 color: #ffffff; 183 text-shadow: none; 184 } 185 186 45% { 187 color: #fbfd7b; 188 text-shadow: 0 0 15px #fbfd7b8a; 189 } 190 191 50% { 192 color: #ffffff; 193 text-shadow: none; 194 } 195 196 53% { 197 color: #fbfd7b; 198 text-shadow: 0 0 15px #fbfd7b8a; 199 } 200 201 65% { 202 color: #ffffff; 203 text-shadow: none; 204 } 205 206 100% { 207 color: #fbfd7b; 208 text-shadow: 0 0 15px #fbfd7b8a; 209 } 210}
1.9K views
1.9K views
MIT License