{"html":"\n","css":".button {\n --background: #2b3044;\n --background-hover: #1e2235;\n --text: #fff;\n --shadow: rgba(0, 9, 61, 0.2);\n --paper: #5c86ff;\n --paper-lines: #fff;\n --trash: #e1e6f9;\n --trash-lines: #bbc1e1;\n --check: #fff;\n --check-background: #5c86ff;\n position: relative;\n border: none;\n outline: none;\n background: none;\n padding: 10px 24px;\n border-radius: 7px;\n min-width: 142px;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n display: flex;\n color: var(--text);\n background: var(--btn, var(--background));\n box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 8px) var(--shadow);\n transform: scale(var(--scale, 1));\n transition:\n transform 0.3s,\n box-shadow 0.3s,\n background 0.3s;\n}\n.button span {\n display: block;\n font-size: 14px;\n line-height: 25px;\n font-weight: 600;\n opacity: var(--span-opacity, 1);\n transform: translateX(var(--span-x, 0)) translateZ(0);\n transition:\n transform 0.4s ease var(--span-delay, 0.2s),\n opacity 0.3s ease var(--span-delay, 0.2s);\n}\n.button .trash {\n display: block;\n position: relative;\n left: -8px;\n transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0)\n scale(var(--trash-scale, 0.64));\n transition: transform 0.5s;\n}\n.button .trash:before,\n.button .trash:after {\n content: \"\";\n position: absolute;\n height: 8px;\n width: 2px;\n border-radius: 1px;\n background: var(--icon, var(--trash));\n bottom: 100%;\n transform-origin: 50% 6px;\n transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7))\n rotate(var(--r, 0deg));\n transition:\n transform 0.4s,\n background 0.3s;\n}\n\n.button .trash:before {\n left: 1px;\n}\n.button .trash:after {\n right: 1px;\n --x: -3px;\n}\n.button .trash .top {\n position: absolute;\n overflow: hidden;\n left: -4px;\n right: -4px;\n bottom: 100%;\n height: 40px;\n z-index: 1;\n transform: translateY(2px);\n}\n.button .trash .top:before,\n.button .trash .top:after {\n content: \"\";\n position: absolute;\n border-radius: 1px;\n background: var(--icon, var(--trash));\n width: var(--w, 12px);\n height: var(--h, 2px);\n left: var(--l, 8px);\n bottom: var(--b, 5px);\n transition:\n background 0.3s,\n transform 0.4s;\n}\n.button .trash .top:after {\n --w: 28px;\n --h: 2px;\n --l: 0;\n --b: 0;\n transform: scaleX(var(--trash-line-scale, 1));\n}\n.button .trash .top .paper {\n width: 14px;\n height: 18px;\n background: var(--paper);\n left: 7px;\n bottom: 0;\n border-radius: 1px;\n position: absolute;\n transform: translateY(-16px);\n opacity: 0;\n}\n.button .trash .top .paper:before,\n.button .trash .top .paper:after {\n content: \"\";\n width: var(--w, 10px);\n height: 2px;\n border-radius: 1px;\n position: absolute;\n left: 2px;\n top: var(--t, 2px);\n background: var(--paper-lines);\n transform: scaleY(0.7);\n box-shadow: 0 9px 0 var(--paper-lines);\n}\n.button .trash .top .paper:after {\n --t: 5px;\n --w: 7px;\n}\n.button .trash .box {\n width: 20px;\n height: 25px;\n border: 2px solid var(--icon, var(--trash));\n border-radius: 1px 1px 4px 4px;\n position: relative;\n overflow: hidden;\n z-index: 2;\n transition: border-color 0.3s;\n}\n.button .trash .box:before,\n.button .trash .box:after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: var(--h, 20px);\n top: 0;\n left: var(--l, 50%);\n background: var(--b, var(--trash-lines));\n}\n.button .trash .box:before {\n border-radius: 2px;\n margin-left: -2px;\n transform: translateX(-3px) scale(0.6);\n box-shadow: 10px 0 0 var(--trash-lines);\n opacity: var(--trash-lines-opacity, 1);\n transition:\n transform 0.4s,\n opacity 0.4s;\n}\n.button .trash .box:after {\n --h: 16px;\n --b: var(--paper);\n --l: 1px;\n transform: translate(-0.5px, -16px) scaleX(0.5);\n box-shadow:\n 7px 0 0 var(--paper),\n 14px 0 0 var(--paper),\n 21px 0 0 var(--paper);\n}\n.button .trash .check {\n padding: 4px 3px;\n border-radius: 50%;\n background: var(--check-background);\n position: absolute;\n left: 2px;\n top: 24px;\n opacity: var(--check-opacity, 0);\n transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));\n transition:\n transform var(--check-duration, 0.2s) ease var(--check-delay, 0s),\n opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s);\n}\n.button .trash .check svg {\n width: 8px;\n height: 6px;\n display: block;\n fill: none;\n stroke-width: 1.5;\n stroke-dasharray: 9px;\n stroke-dashoffset: var(--check-offset, 9px);\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: var(--check);\n transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);\n}\n.button.delete {\n --span-opacity: 0;\n --span-x: 16px;\n --span-delay: 0s;\n --trash-x: 46px;\n --trash-y: 2px;\n --trash-scale: 1;\n --trash-lines-opacity: 0;\n --trash-line-scale: 0;\n --icon: #fff;\n --check-offset: 0;\n --check-opacity: 1;\n --check-scale: 1;\n --check-y: 16px;\n --check-delay: 1.7s;\n --checkmark-delay: 2.1s;\n --check-duration: 0.55s;\n --check-duration-opacity: 0.3s;\n}\n.button.delete .trash:before,\n.button.delete .trash:after {\n --sy: 1;\n --x: 0;\n}\n.button.delete .trash:before {\n --r: 40deg;\n}\n.button.delete .trash:after {\n --r: -40deg;\n}\n.button.delete .trash .top .paper {\n -webkit-animation: paper 1.5s linear forwards 0.5s;\n animation: paper 1.5s linear forwards 0.5s;\n}\n.button.delete .trash .box:after {\n -webkit-animation: cut 1.5s linear forwards 0.5s;\n animation: cut 1.5s linear forwards 0.5s;\n}\n.button.delete,\n.button:hover {\n --btn: var(--background-hover);\n --shadow-y: 5px;\n --shadow-blur: 9px;\n}\n.button:active {\n --shadow-y: 2px;\n --shadow-blur: 5px;\n --scale: 0.94;\n}\n"}

tricky-warthog-6

👁 实时预览

📝 源代码