{"html":"\n","css":"button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 25px 20px 22px;\n box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n background-color: #e8e8e8;\n border-color: #ffe2e2;\n border-style: solid;\n border-width: 9px;\n border-radius: 35px;\n font-size: 25px;\n cursor: pointer;\n font-weight: 900;\n color: rgb(134, 124, 124);\n font-family: monospace;\n transition:\n transform 400ms cubic-bezier(0.68, -0.55, 0.27, 2.5),\n border-color 400ms ease-in-out,\n background-color 400ms ease-in-out;\n word-spacing: -2px;\n}\n\n@keyframes movingBorders {\n 0% {\n border-color: #fce4e4;\n }\n\n 50% {\n border-color: #ffd8d8;\n }\n\n 90% {\n border-color: #fce4e4;\n }\n}\n\nbutton:hover {\n background-color: #eee;\n transform: scale(105%);\n animation: movingBorders 3s infinite;\n}\n\nbutton svg {\n margin-right: 11px;\n fill: rgb(255, 110, 110);\n transition: opacity 100ms ease-in-out;\n}\n\n.filled {\n position: absolute;\n opacity: 0;\n top: 20px;\n left: 22px;\n}\n\n@keyframes beatingHeart {\n 0% {\n transform: scale(1);\n }\n\n 15% {\n transform: scale(1.15);\n }\n\n 30% {\n transform: scale(1);\n }\n\n 45% {\n transform: scale(1.15);\n }\n\n 60% {\n transform: scale(1);\n }\n}\n\nbutton:hover .empty {\n opacity: 0;\n}\n\nbutton:hover .filled {\n opacity: 1;\n animation: beatingHeart 1.2s infinite;\n}\n"}

loud-walrus-26

👁 实时预览

📝 源代码