{"html":"","css":".botao {\n width: 125px;\n height: 45px;\n border-radius: 20px;\n border: none;\n box-shadow: 1px 1px rgba(107, 221, 215, 0.37);\n padding: 5px 10px;\n background: rgb(47,93,197);\n background: linear-gradient(160deg, rgba(47,93,197,1) 0%, rgba(46,86,194,1) 5%, rgba(47,93,197,1) 11%, rgba(59,190,230,1) 57%, rgba(0,212,255,1) 71%);\n color: #fff;\n font-family: Roboto, sans-serif;\n font-weight: 505;\n font-size: 16px;\n line-height: 1;\n cursor: pointer;\n filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568));\n transition: .5s linear;\n}\n\n.botao .mysvg {\n display: none;\n}\n\n.botao:hover {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n transition: .5s linear;\n}\n\n.botao:hover .texto {\n display: none;\n}\n\n.botao:hover .mysvg {\n display: inline;\n}\n\n.botao:hover::before {\n content: '';\n position: absolute;\n top: -3px;\n left: -3px;\n width: 100%;\n height: 100%;\n border: 3.5px solid transparent;\n border-top: 3.5px solid #fff;\n border-right: 3.5px solid #fff;\n border-radius: 50%;\n animation: animateC 2s linear infinite;\n}\n\n@keyframes animateC {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

curly-rat-7

👁 实时预览

📝 源代码