{"html":"","css":"button {\n position: relative;\n padding: 0;\n width: 135px;\n height: 65px;\n background: transparent;\n font-size: 17px;\n border: 1px solid #ffffff1c;\n border-radius: 8px;\n box-shadow: inset 0 0 10px #ffffff1c;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 135px;\n height: 65px;\n background: radial-gradient(circle at 100% -50%, #ffffff69 45%, #d4d4d44f 60%, #ffffff36 2%);\n /* background-size: 200%; */\n background-repeat: no-repeat;\n filter: opacity(.3) blur(.3em);\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n height: 100%;\n width: 100%;\n background-color: #fbfd7b;\n filter: blur(2em);\n opacity: 0;\n pointer-events: none;\n}\n\nbutton p {\n display: inline-block;\n width: 135px;\n line-height: 65px;\n font-size: 17px;\n font-weight: 900;\n color: #d6d6d6;\n filter: blur(.02em);\n z-index: 5;\n}\n\nbutton .svg-1 {\n position: absolute;\n top: 50%;\n left: 20%;\n transform: translate(0, -50%) rotate(45deg);\n width: 2.5rem;\n height: auto;\n filter: blur(.1rem) opacity(.5);\n z-index: -5;\n}\n\n.fil0 {\n fill: #935E28\n}\n\nbutton:hover {\n filter: blur(.05em);\n animation: lightBox 1s ease-in-out forwards;\n}\n\nbutton:hover::after {\n animation: light 1s ease-in-out forwards;\n}\n\nbutton:hover p {\n animation: lightText 1s ease-in-out forwards;\n}\n\n@keyframes lightBox {\n 0% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 5px 0px #fbfd7b8a, inset 0 0 10px #fbfd7b8a;\n }\n\n 20% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 30% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 10px 0px #fbfd7b8a, inset 0 0 15px #fbfd7b8a;\n }\n\n 38% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 45% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 20px #fbfd7b8a;\n }\n\n 50% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 53% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n\n 65% {\n border: 1px solid #ffffff1c;\n box-shadow: none;\n }\n\n 100% {\n border: 1px solid #fbfd7b;\n box-shadow: 0 0 15px 0px #fbfd7b8a, inset 0 0 25px #fbfd7b8a;\n }\n}\n\n@keyframes light {\n 0% {\n opacity: .7;\n }\n\n 20% {\n opacity: 0;\n }\n\n 30% {\n opacity: .7;\n }\n\n 38% {\n opacity: 0;\n }\n\n 45% {\n opacity: .7;\n }\n\n 50% {\n opacity: 0;\n }\n\n 53% {\n opacity: .7;\n }\n\n 65% {\n opacity: 0;\n }\n\n 100% {\n opacity: .7;\n }\n}\n\n@keyframes lightText {\n 0% {\n color: #fbfd7b;\n text-shadow: 0 0 5px #fbfd7b8a;\n }\n\n 20% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 30% {\n color: #fbfd7b;\n text-shadow: 0 0 10px #fbfd7b8a;\n }\n\n 38% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 45% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 50% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 53% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n\n 65% {\n color: #ffffff;\n text-shadow: none;\n }\n\n 100% {\n color: #fbfd7b;\n text-shadow: 0 0 15px #fbfd7b8a;\n }\n}"}

slimy-fish-99

👁 实时预览

📝 源代码