{"html":"

\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n

\n","css":"/* Refactored by Zaiko */\n/* OG by Aaron Iker */\n\n/* --- Global Color Variables (Optional) --- */\n:root {\n --button-color: #5628ee;\n --icons-color: #fff;\n --plus-color: #fff;\n --scale: 1;\n}\n\n/* --- Button --- */\n.add {\n width: 84px;\n height: 84px;\n position: relative;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n transform: scale(0.5);\n transform-origin: 50% 50%;\n transition: transform 0.4s ease;\n}\n\n.add a {\n display: block;\n position: relative;\n width: 50%;\n padding-bottom: 50%;\n background: var(--button-color, #5628ee);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden; /* Agregado para consistencia */\n transition:\n border-radius 0.3s ease,\n transform 0.2s ease;\n}\n\n.add a svg {\n display: block;\n width: 14px;\n height: 14px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -7px 0 0 -7px;\n opacity: 0;\n fill: var(--icons-color, #fff);\n transform: scale(0.6) rotate(-45deg);\n transition: all 0.15s ease;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n\n/* Corner Radii */\n.add a:nth-child(1) {\n border-radius: 8px 0 0 0;\n}\n.add a:nth-child(2) {\n border-radius: 0 0 0 8px;\n}\n.add a:nth-child(3) {\n border-radius: 0 8px 0 0;\n}\n.add a:nth-child(4) {\n border-radius: 0 0 8px 0;\n}\n\n/* The Plus Sign (+) */\n.add:before,\n.add:after {\n content: \"\";\n width: 28px;\n height: 6px;\n border-radius: 3px;\n background: var(--plus-color, #fff);\n position: absolute;\n left: 50%;\n top: 50%;\n display: block;\n z-index: 1;\n transform-origin: 50% 50%;\n transition:\n transform 0.25s ease,\n opacity 0.25s ease;\n}\n\n.add:before {\n transform: translate(-50%, -50%) scaleY(0.76);\n}\n\n.add:after {\n transform: translate(-50%, -50%) rotate(90deg) scaleY(0.76);\n}\n\n/* --- Hover State (Expanded) --- */\n.add:hover {\n transform: scale(1) rotate(45deg);\n transition: transform 0.4s ease 0.1s;\n}\n\n.add:hover:before,\n.add:hover:after {\n opacity: 0;\n transform: translate(-50%, -50%) rotate(0deg) scale(0);\n transition:\n transform 0.15s ease,\n opacity 0.15s ease;\n}\n\n.add:hover a {\n --scale: 1;\n pointer-events: none;\n border-radius: 50%;\n animation: pointerEvent 0s linear forwards 0.4s;\n transition:\n border-radius 0.15s ease 0.1s,\n transform 0.25s ease 0.15s;\n}\n\n/* Transform */\n.add:hover a:nth-child(1) {\n transform: translate(-6px, -6px) scale(var(--scale));\n}\n.add:hover a:nth-child(2) {\n transform: translate(-6px, 6px) scale(var(--scale));\n}\n.add:hover a:nth-child(3) {\n transform: translate(6px, -6px) scale(var(--scale));\n}\n.add:hover a:nth-child(4) {\n transform: translate(6px, 6px) scale(var(--scale));\n}\n\n.add:hover a svg {\n opacity: 0.7;\n transition: all 0.3s ease 0.2s;\n transform: scale(1) rotate(-45deg);\n}\n\n.add:hover a:hover {\n --scale: 0.92;\n transition:\n border-radius 0.2s ease 0.1s,\n transform 0.25s ease 0s;\n}\n\n.add:hover a:hover svg {\n opacity: 1;\n transition: all 0.3s ease 0s;\n}\n\n/* --- Keyframes --- */\n@keyframes pointerEvent {\n 100% {\n pointer-events: auto;\n }\n}\n"}

red-goose-45

👁 实时预览

📝 源代码