{"html":"","css":".btn {\n cursor: pointer;\n width: 50px;\n height: 50px;\n border: none;\n position: relative;\n border-radius: 10px;\n -webkit-box-shadow: 1px 1px 5px .2px #00000035;\n box-shadow: 1px 1px 5px .2px #00000035;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n transition-delay: .2s;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: space-between;\n}\n\n.btn:hover {\n width: 150px;\n transition-delay: .2s;\n}\n\n.btn:hover > .paragraph {\n visibility: visible;\n opacity: 1;\n -webkit-transition-delay: .4s;\n transition-delay: .4s;\n}\n\n.btn:hover > .icon-wrapper .icon {\n transform: scale(1.1);\n}\n\n.bnt:hover > .icon-wrapper .icon path {\n stroke: black;\n}\n\n.paragraph {\n color: black;\n visibility: hidden;\n opacity: 0;\n font-size: 18px;\n margin-right: 20px;\n padding-left: 20px;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n font-weight: bold;\n text-transform: uppercase;\n}\n\n.icon-wrapper {\n width: 50px;\n height: 50px;\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon {\n transform: scale(.9);\n transition: .2s linear;\n}\n\n.icon path {\n stroke: #000;\n stroke-width: 2px;\n -webkit-transition: .2s linear;\n transition: .2s linear;\n}"}

sour-cow-47

👁 实时预览

📝 源代码