{"html":"","css":"button {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n position: relative;\n list-style: none;\n width: 100px;\n height: 32px;\n border: none;\n background: transparent;\n font-family: inherit;\n cursor: pointer;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: -5px;\n width: 100%;\n height: 10px;\n background: #2a2a2a;\n transform: skewX(-41deg);\n}\n\nbutton:after {\n content: '';\n position: absolute;\n top: 5px;\n left: -9px;\n width: 9px;\n height: 100%;\n background: #2a2a2a;\n transform: skewY(-49deg);\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #2a2a2a;\n color: #fff;\n font-size: 25px;\n transition: 1.1s ease-out;\n}\n\nbutton:hover span {\n z-index: 1000;\n transition: .3s;\n color: #fff;\n}\n\nbutton:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}\n\nbutton:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: .8;\n}\n\nbutton:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: .6;\n}\n\nbutton:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: .4;\n}\n\nbutton:hover span:nth-child(1) {\n transform: translate(0px, 0px);\n opacity: .2;\n}\n\nbutton:active span:nth-child(5) {\n transform: translate(20px, -20px);\n opacity: 1;\n}\n\nbutton:active span:nth-child(4) {\n transform: translate(15px, -15px);\n}\n\nbutton:active span:nth-child(3) {\n transform: translate(10px, -10px);\n}\n\nbutton:active span:nth-child(2) {\n transform: translate(5px, -5px);\n}\n\nbutton:active span:nth-child(1) {\n transform: translate(0px, 0px);\n}\n\nbutton:nth-child(1):hover span {\n background: #52E19F;\n}"}

big-ape-36

👁 实时预览

📝 源代码

🔗 相关联的样式