{"html":"\n","css":"button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 22px 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 transition: transform 400ms cubic-bezier(.68,-0.55,.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\n.filled,\n.empty {\n fill: rgb(255, 110, 110);\n transition: opacity 100ms ease-in-out;\n}\n\n.filled {\n position: absolute;\n opacity: 0;\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}"}

lazy-lionfish-12

👁 实时预览

📝 源代码