{"html":"","css":"button {\n position: relative;\n width: 11em;\n height: 4em;\n outline: none;\n transition: 0.1s;\n background-color: transparent;\n border: none;\n font-size: 13px;\n font-weight: bold;\n color: #ddebf0;\n}\n\n#clip {\n --color: #2761c3;\n position: absolute;\n top: 0;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border: 5px double var(--color);\n box-shadow: inset 0px 0px 15px #195480;\n -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);\n}\n\n.arrow {\n position: absolute;\n transition: 0.2s;\n background-color: #2761c3;\n top: 35%;\n width: 11%;\n height: 30%;\n}\n\n#leftArrow {\n left: -13.5%;\n -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);\n}\n\n#rightArrow {\n -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);\n left: 102%;\n}\n\nbutton:hover #rightArrow {\n background-color: #27c39f;\n left: -15%;\n animation: 0.6s ease-in-out both infinite alternate rightArrow8;\n}\n\nbutton:hover #leftArrow {\n background-color: #27c39f;\n left: 103%;\n animation: 0.6s ease-in-out both infinite alternate leftArrow8;\n}\n\n.corner {\n position: absolute;\n width: 4em;\n height: 4em;\n background-color: #2761c3;\n box-shadow: inset 1px 1px 8px #2781c3;\n transform: scale(1) rotate(45deg);\n transition: 0.2s;\n}\n\n#rightTop {\n top: -1.98em;\n left: 91%;\n}\n\n#leftTop {\n top: -1.96em;\n left: -3.0em;\n}\n\n#leftBottom {\n top: 2.10em;\n left: -2.15em;\n}\n\n#rightBottom {\n top: 45%;\n left: 88%;\n}\n\nbutton:hover #leftTop {\n animation: 0.1s ease-in-out 0.05s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightTop {\n animation: 0.1s ease-in-out 0.15s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #rightBottom {\n animation: 0.1s ease-in-out 0.25s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover #leftBottom {\n animation: 0.1s ease-in-out 0.35s both changeColor8,\n 0.2s linear 0.4s both lightEffect8;\n}\n\nbutton:hover .corner {\n transform: scale(1.25) rotate(45deg);\n}\n\nbutton:hover #clip {\n animation: 0.2s ease-in-out 0.55s both greenLight8;\n --color: #27c39f;\n}\n\n@keyframes changeColor8 {\n from {\n background-color: #2781c3;\n }\n\n to {\n background-color: #27c39f;\n }\n}\n\n@keyframes lightEffect8 {\n from {\n box-shadow: 1px 1px 5px #27c39f;\n }\n\n to {\n box-shadow: 0 0 2px #27c39f;\n }\n}\n\n@keyframes greenLight8 {\n from {\n }\n\n to {\n box-shadow: inset 0px 0px 32px #27c39f;\n }\n}\n\n@keyframes leftArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(10px);\n }\n}\n\n@keyframes rightArrow8 {\n from {\n transform: translate(0px);\n }\n\n to {\n transform: translateX(-10px);\n }\n}\n\n\n"}

ordinary-rat-19

👁 实时预览

📝 源代码