{"html":"","css":"/* Fancy Google hover button made by: csozi | Website: www.csozi.hu*/\n\n.button {\n padding: 10px;\n font-weight: bold;\n display: flex;\n position: relative;\n overflow: hidden;\n border-radius: 35px;\n align-items: center;\n border: solid black 2px;\n outline: none;\n}\n\n.svg {\n height: 25px;\n margin-right: 10px;\n}\n\n.button .text {\n z-index: 10;\n font-size: 14px;\n}\n\n.button:hover .text {\n animation: text forwards 0.3s;\n /*color: white;*/\n}\n\n@keyframes text {\n from {\n color: black;\n }\n\n to {\n color: white;\n }\n}\n\n.svg {\n z-index: 6;\n}\n\n.button:hover::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n left: 9%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n opacity: 0;\n border-radius: 300px;\n animation: wave1 2.5s ease-in-out forwards;\n}\n\n.button:hover::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n left: 9%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n opacity: 0;\n border-radius: 300px;\n animation: wave2 2.5s ease-in-out forwards;\n}\n\n@keyframes wave1 {\n 0% {\n z-index: 1;\n background: #EB4335;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 1% {\n z-index: 1;\n background: #EB4335;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 25% {\n z-index: 1;\n background: #EB4335;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 26% {\n z-index: 3;\n background: #34A853;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 50% {\n z-index: 3;\n background: #34A853;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 70% {\n z-index: 3;\n background: #34A853;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 100% {\n z-index: 3;\n background: #34A853;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n}\n\n@keyframes wave2 {\n 0% {\n z-index: 2;\n background: #FBBC05;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 11% {\n z-index: 2;\n background: #FBBC05;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 35% {\n z-index: 2;\n background: #FBBC05;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 39% {\n z-index: 2;\n background: #FBBC05;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 40% {\n z-index: 4;\n background: #4285F4;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 64% {\n z-index: 4;\n background: #4285F4;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n\n 100% {\n z-index: 4;\n background: #4285F4;\n width: 800px;\n height: 800px;\n opacity: 1;\n }\n}\n\n.button:hover .red {\n animation: disappear 0.1s forwards;\n animation-delay: 0.1s;\n}\n\n.button:hover .yellow {\n animation: disappear 0.1s forwards;\n animation-delay: 0.3s;\n}\n\n.button:hover .green {\n animation: disappear 0.1s forwards;\n animation-delay: 0.7s;\n}\n\n.button:hover .blue {\n animation: disappear 0.1s forwards;\n animation-delay: 1.1s;\n}\n\n@keyframes disappear {\n from {\n filter: brightness(1);\n }\n\n to {\n filter: brightness(100);\n }\n}"}

spotty-lion-8

👁 实时预览

📝 源代码