Button by csozidev
#e8e8e8
1/* Fancy Google hover button made by: csozi | Website: www.csozi.hu*/ 2 3.button { 4 padding: 10px; 5 font-weight: bold; 6 display: flex; 7 position: relative; 8 overflow: hidden; 9 border-radius: 35px; 10 align-items: center; 11 border: solid black 2px; 12 outline: none; 13} 14 15.svg { 16 height: 25px; 17 margin-right: 10px; 18} 19 20.button .text { 21 z-index: 10; 22 font-size: 14px; 23} 24 25.button:hover .text { 26 animation: text forwards 0.3s; 27 /*color: white;*/ 28} 29 30@keyframes text { 31 from { 32 color: black; 33 } 34 35 to { 36 color: white; 37 } 38} 39 40.svg { 41 z-index: 6; 42} 43 44.button:hover::before { 45 content: ""; 46 display: block; 47 position: absolute; 48 top: 50%; 49 left: 9%; 50 transform: translate(-50%, -50%); 51 width: 0; 52 height: 0; 53 opacity: 0; 54 border-radius: 300px; 55 animation: wave1 2.5s ease-in-out forwards; 56} 57 58.button:hover::after { 59 content: ""; 60 display: block; 61 position: absolute; 62 top: 50%; 63 left: 9%; 64 transform: translate(-50%, -50%); 65 width: 0; 66 height: 0; 67 opacity: 0; 68 border-radius: 300px; 69 animation: wave2 2.5s ease-in-out forwards; 70} 71 72@keyframes wave1 { 73 0% { 74 z-index: 1; 75 background: #EB4335; 76 width: 0; 77 height: 0; 78 opacity: 1; 79 } 80 81 1% { 82 z-index: 1; 83 background: #EB4335; 84 width: 0; 85 height: 0; 86 opacity: 1; 87 } 88 89 25% { 90 z-index: 1; 91 background: #EB4335; 92 width: 800px; 93 height: 800px; 94 opacity: 1; 95 } 96 97 26% { 98 z-index: 3; 99 background: #34A853; 100 width: 0; 101 height: 0; 102 opacity: 1; 103 } 104 105 50% { 106 z-index: 3; 107 background: #34A853; 108 width: 800px; 109 height: 800px; 110 opacity: 1; 111 } 112 113 70% { 114 z-index: 3; 115 background: #34A853; 116 width: 800px; 117 height: 800px; 118 opacity: 1; 119 } 120 121 100% { 122 z-index: 3; 123 background: #34A853; 124 width: 800px; 125 height: 800px; 126 opacity: 1; 127 } 128} 129 130@keyframes wave2 { 131 0% { 132 z-index: 2; 133 background: #FBBC05; 134 width: 0; 135 height: 0; 136 opacity: 1; 137 } 138 139 11% { 140 z-index: 2; 141 background: #FBBC05; 142 width: 0; 143 height: 0; 144 opacity: 1; 145 } 146 147 35% { 148 z-index: 2; 149 background: #FBBC05; 150 width: 800px; 151 height: 800px; 152 opacity: 1; 153 } 154 155 39% { 156 z-index: 2; 157 background: #FBBC05; 158 width: 800px; 159 height: 800px; 160 opacity: 1; 161 } 162 163 40% { 164 z-index: 4; 165 background: #4285F4; 166 width: 0; 167 height: 0; 168 opacity: 1; 169 } 170 171 64% { 172 z-index: 4; 173 background: #4285F4; 174 width: 800px; 175 height: 800px; 176 opacity: 1; 177 } 178 179 100% { 180 z-index: 4; 181 background: #4285F4; 182 width: 800px; 183 height: 800px; 184 opacity: 1; 185 } 186} 187 188.button:hover .red { 189 animation: disappear 0.1s forwards; 190 animation-delay: 0.1s; 191} 192 193.button:hover .yellow { 194 animation: disappear 0.1s forwards; 195 animation-delay: 0.3s; 196} 197 198.button:hover .green { 199 animation: disappear 0.1s forwards; 200 animation-delay: 0.7s; 201} 202 203.button:hover .blue { 204 animation: disappear 0.1s forwards; 205 animation-delay: 1.1s; 206} 207 208@keyframes disappear { 209 from { 210 filter: brightness(1); 211 } 212 213 to { 214 filter: brightness(100); 215 } 216}
1.1K views
1.1K views
MIT License