{"html":"","css":"button {\n position: relative;\n padding: 13px 35px;\n background: transparent;\n font-size: 17px;\n font-weight: 900;\n border: none;\n transition: all .3s ease-in-out;\n}\n\nbutton::after {\n content: \"Read More\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 155px;\n height: 47px;\n background-color: #ffffff;\n font-size: 17px;\n font-weight: 900;\n line-height: 47px;\n color: #181818;\n border: 2px solid #181818;\n border-radius: 50px;\n transition: all .3s ease-in-out;\n z-index: 2;\n}\n\nbutton:hover::after {\n width: 165px;\n height: 50px;\n font-size: 18px;\n line-height: 50px;\n}\n\nbutton:focus::after {\n content: \"Read less\";\n top: 200%;\n width: 155px;\n height: 47px;\n font-size: 17px;\n line-height: 47px;\n z-index: -2;\n pointer-events: none;\n}\n\n.icon {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n width: 20px;\n height: auto;\n z-index: -3;\n transition: all .3s ease-in-out;\n}\n\nbutton:focus .icon {\n top: -250%;\n width: 75px;\n height: auto;\n}\n\n.fil0 {\n fill: #333333\n}\n\n.fil2 {\n fill: #222222\n}\n\n.fil1 {\n fill: #181818\n}\n\n.fil3 {\n fill: #181818\n}"}

average-ape-81

👁 实时预览

📝 源代码