{"html":"\n\n\n\n\n\n","css":"button {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n background: #fd1853;\n font-family: \"Montserrat\", sans-serif;\n overflow: hidden;\n border: none;\n}\n\nbutton:after {\n content: \" \";\n width: 0%;\n height: 100%;\n background: #fff;\n position: absolute;\n transition: all 0.4s ease-in-out;\n right: 0;\n}\n\nbutton:hover::after {\n right: auto;\n left: 0;\n width: 100%;\n}\n\nbutton span {\n text-align: center;\n text-decoration: none;\n width: 100%;\n padding: 18px 25px;\n color: #fffcfd;\n font-size: 1.125em;\n font-weight: 700;\n letter-spacing: 0.3em;\n z-index: 20;\n transition: all 0.3s ease-in-out;\n}\n\nbutton:hover span {\n animation: scaleUp 0.3s ease-in-out;\n color: #fd1853;\n}\n\nbutton:hover {\n animation: scaleUp 0.3s ease-in-out;\n}\n\n@keyframes scaleUp {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fd1853);\n z-index: -5;\n transition: all .8s ease;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -2%;\n left: 0%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: 34%;\n left: 41.5%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 55%;\n left: 25%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: 0%;\n left: 55%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 25%;\n left: 85%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 75%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fd1853);\n z-index: 2;\n}\n\n"}

ugly-parrot-58

👁 实时预览

📝 源代码