{"html":"\n","css":".Projects-Button {\n width: fit-content;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px 20px;\n gap: 10px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138));\n transition: all 0.3s;\n box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166);\n}\n.IconContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n height: 25px;\n position: relative;\n}\n.svgBG {\n width: 25px;\n height: auto;\n}\n.svgFG {\n width: 9px;\n height: auto;\n z-index: 2;\n position: absolute;\n}\n.text {\n color: rgb(240, 240, 240);\n font-weight: 500;\n font-size: 16px;\n}\n.Projects-Button:hover .svgFG {\n animation: clockwise 2s linear infinite;\n}\n\n.Projects-Button:hover .svgBG {\n animation: anti-clockwise 2s linear infinite;\n}\n@keyframes clockwise {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes anti-clockwise {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n.Projects-Button:hover {\n background-color: rgb(119, 57, 166);\n}\n"}

nervous-warthog-37

👁 实时预览

📝 源代码