{"html":" ","css":"button {\n position: relative;\n padding: 13px 35px;\n background: #2e323c;\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n border: 3px solid #2e323c;\n border-radius: 8px;\n transition: all .3s ease-in-out;\n}\n\np:nth-child(1) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(2) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(3) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\np:nth-child(4) {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 17px;\n font-weight: 900;\n color: #FFF;\n transition: all .3s ease-in-out;\n z-index: -5;\n}\n\nbutton:hover {\n background: transparent;\n box-shadow: 0 0 15px #2e323c;\n}\n\nbutton:hover p:nth-child(1) {\n top: 0%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(2) {\n top: -50%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(3) {\n top: 100%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:hover p:nth-child(4) {\n top: 150%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(1) {\n top: -20%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(2) {\n top: -90%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(3) {\n top: 120%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}\n\nbutton:active p:nth-child(4) {\n top: 190%;\n filter: drop-shadow(0 0 5px #FFFFFF);\n z-index: 1;\n}"}

smart-turkey-26

👁 实时预览

📝 源代码