{"html":"","css":".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n padding: 15px 20px;\n background-color: #212121;\n border: none;\n font: inherit;\n color: #e8e8e8;\n font-size: 20px;\n font-weight: 600;\n border-radius: 50px;\n cursor: not-allowed;\n overflow: hidden;\n transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button span {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n}\n\n.button::before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n translate: 0 105%;\n background-color: #F53844;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button svg {\n width: 32px;\n height: 32px;\n fill: #F53844;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover {\n animation: shake 0.2s linear 1;\n}\n\n.button:hover::before {\n translate: 0 0;\n}\n\n.button:hover svg {\n fill: #e8e8e8;\n}\n\n@keyframes shake {\n 0% {\n rotate: 0deg;\n }\n\n 33% {\n rotate: 10deg;\n }\n\n 66% {\n rotate: -10deg;\n }\n\n 100% {\n rotate: 10deg;\n }\n}\n"}

cuddly-squid-93

👁 实时预览

📝 源代码