{"html":"\n","css":".Btn {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 45px;\n height: 45px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition-duration: 0.3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\n background: rgb(255, 135, 65);\n background: linear-gradient(\n 250deg,\n rgba(255, 135, 65, 1) 15%,\n rgba(255, 65, 65, 1) 65%\n );\n}\n\n/* plus sign */\n.sign {\n width: 100%;\n transition-duration: 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sign svg {\n width: 17px;\n}\n\n.sign svg path {\n fill: white;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: white;\n font-size: 1.2em;\n font-weight: 600;\n transition-duration: 0.3s;\n}\n/* hover effect on button width */\n.Btn:hover {\n width: 125px;\n border-radius: 40px;\n transition-duration: 0.3s;\n}\n\n.Btn:hover .sign {\n width: 30%;\n transition-duration: 0.3s;\n padding-left: 20px;\n}\n/* hover effect button's text */\n.Btn:hover .text {\n opacity: 1;\n width: 70%;\n transition-duration: 0.3s;\n padding-right: 10px;\n}\n/* button click effect*/\n.Btn:active {\n transform: translate(2px, 2px);\n}\n"}

sweet-rattlesnake-28

👁 实时预览

📝 源代码