{"loaderData":{"0":null,"0-2":{"total":7091,"projects":[{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"4f336d","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1358,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n font-family: inherit;\n font-size: 18px;\n border-radius: 40em;\n width: 8em;\n height: 3em;\n z-index: 1;\n color: white;\n overflow: hidden;\n border: none;\n}\n\nbutton .text {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n line-height: 3em;\n border-radius: 40em;\n border: none;\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\nbutton .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 5em;\n height: 3em;\n transition: transform .3s ease-in-out, background .3s ease-in-out;\n}\n\nbutton .blob:nth-child(2) {\n left: 0em;\n top: 0;\n background: #ff5656;\n}\n\nbutton .blob:nth-child(3) {\n left: 1.8em;\n top: 0;\n z-index: -1;\n background: #f9ca24;\n}\n\nbutton .blob:nth-child(4) {\n left: 4em;\n top: -1em;\n background: #ff9f1a;\n}\n\nbutton .blob:nth-child(5) {\n left: 4.3em;\n top: 1.6em;\n background: #00a8ff;\n}\n\nbutton:hover .blob:nth-child(2) {\n background: #00a8ff;\n}\n\nbutton:hover .blob:nth-child(3) {\n background: #ff9f1a;\n}\n\nbutton:hover .blob:nth-child(4) {\n background: #f9ca24;\n}\n\nbutton:hover .blob:nth-child(5) {\n background: #ff5656;\n}\n\nbutton:hover .blob {\n transform: scale(1.3);\n}\n\nbutton:active {\n border: 2px solid white;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"236d80","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":868,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me \n","css":".bck-grnd {\n position: relative;\n display: flex;\n background-color: #dac0a3;\n padding: 15px 20px;\n font-size: 25px;\n color: black;\n text-decoration: none;\n border: 3px solid transparent;\n overflow: hidden;\n font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n z-index: 2;\n border-radius: 10px;\n letter-spacing: 3px;\n box-shadow: 0 0.4rem #eadbc8;\n box-shadow: 0.4rem 0.4rem 0 #eadbc8;\n transition: 0.5s;\n}\n\n.bck-grnd .style {\n background: #f8f0e5;\n height: 150px;\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 30px 30px 0px 0px;\n top: 120%;\n z-index: -1;\n transition: 0.5s;\n}\n\n.bck-grnd:hover .style {\n top: -70%;\n border-radius: 50px 50px 0px 0px;\n}\n\n.bck-grnd:hover {\n color: #d8ba98;\n border: 3px solid #dac0a3;\n box-shadow: none;\n}\n\n.bck-grnd:active {\n transform: scale(1.1);\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"bd350d","snapshot":null,"tags":null,"title":"button by DevVaradPatil","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 130px;\n height: 45px;\n text-align: center;\n line-height: 45px;\n color: #fff;\n font-size: 15px;\n text-transform: uppercase;\n text-decoration: none;\n font-family: sans-serif;\n box-sizing: border-box;\n background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);\n background-size: 400%;\n border-radius: 30px;\n z-index: 1;\n border: none;\n outline: none;\n}\n\nbutton:hover {\n animation: animate 6s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\nbutton::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n z-index: -1;\n background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);\n border-radius: 40px;\n filter: blur(20px);\n opacity: 0;\n transition: 0.5s;\n}\n\nbutton:hover::before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 6s linear infinite;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"ec39bc","snapshot":null,"tags":null,"title":"button by Gautammsharma","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":874,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".comic-button {\n background-color: #ffed4b;\n border: none;\n color: #000;\n font-size: 1.2rem;\n font-weight: bold;\n padding: 0.5rem 1rem;\n text-transform: uppercase;\n text-shadow: 1px 1px 0 #fff;\n box-shadow: 4px 4px 0 #000;\n position: relative;\n overflow: hidden;\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.comic-button:before {\n content: \"\";\n position: absolute;\n top: -20%;\n left: -20%;\n width: 150%;\n height: 150%;\n background-color: rgba(0,0,0,0.2);\n transform: rotate(45deg);\n z-index: -1;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n}\n\n.comic-button:hover {\n transform: translate(2px, 2px);\n box-shadow: 6px 6px 0 #000;\n}\n\n.comic-button:hover:before {\n opacity: 1;\n}\n\n.comic-button:active {\n transform: translate(0px, 0px);\n box-shadow: 4px 4px 0 #000;\n}\n\n.comic-button:active:before {\n opacity: 0;\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"55b35c","snapshot":null,"tags":null,"title":"button by VashonG","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":249,"cssLen":1878,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n <\n /\n html\n >\n","css":".code-button {\n display: inline-block;\n font-family: \"Menlo\", \"Bitstream Vera Sans Mono\", \"DejaVu Sans Mono\", \"Monaco\", \"Consolas\", monospace;\n margin: 1em;\n border-radius: 3px;\n background: #434d5a;\n border: none;\n padding: 1em 0;\n color: white;\n text-align: center;\n text-decoration: none;\n width: 9em;\n transition: all 0.2s ease, background-color 0.2s ease-in 0.15s, box-shadow 0.2s ease-in 0.15s, color 0s ease;\n}\n\n.code-button__bracket, .code-button__text, .code-button__code {\n display: inline-block;\n margin-right: -3px;\n text-align: center;\n width: 0.5em;\n transition: all 0.2s ease, color 0s ease;\n}\n\n.code-button__bracket {\n font-weight: normal;\n}\n\n.code-button__text {\n opacity: 0;\n position: absolute;\n transition: all 0s ease;\n}\n\n.code-button:hover {\n padding: 1em 0;\n transition: all 0.2s ease, background-color 0.2s ease-in 0.05s, box-shadow 0.2s ease-in 0.05s, color 0s ease;\n}\n\n.code-button:hover .code-button__code, .code-button:hover .code-button__text {\n width: 2em;\n}\n\n.code-button:hover .code-button__code, .code-button:hover .code-button__text, .code-button:hover .code-button__bracket {\n transition: all 0.2s ease, color 0s ease;\n}\n\n.code-button:hover .code-button__code {\n opacity: 0;\n position: absolute;\n}\n\n.code-button:hover .code-button__text {\n opacity: 1;\n position: static;\n}\n\n.code-button--color:hover {\n color: #434d5a;\n}\n\n.code-button--color:hover.code-button--css {\n background-color: #aaffa9;\n box-shadow: inset 15px 5px 70px -10px #aaffa9, inset -15px -5px 70px -10px #11ffbd;\n}\n\n.code-button--color:hover.code-button--html {\n background-color: #fc8f71;\n box-shadow: inset 15px 15px 90px -20px #fc8f71, inset -15px -5px 80px -10px #fcdcab;\n}\n\n.code-button--color:hover.code-button--js {\n background-color: #87e1ed;\n box-shadow: inset 15px 15px 90px -20px #7996d1, inset -15px -5px 80px -10px #87e1ed;\n}\n "},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"6ccbc5","snapshot":null,"tags":null,"title":"button by Remon125","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":1068,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":"/* Start Button 1 */\nbutton {\n padding: 15px 60px;\n background: transparent;\n border: 2px solid #edff00;\n font-size: 15px;\n font-weight: bold;\n color: #ffffff;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n display: flex;\n overflow: hidden;\n transition: all 0.5s;\n text-transform: uppercase;\n}\n\nbutton:hover {\n color: #0c071e;\n}\n\nbutton span {\n transition: all 0.5s;\n z-index: -1;\n}\n\nbutton span:nth-child(1), \nbutton span:nth-child(2), \nbutton span:nth-child(3), \nbutton span:nth-child(4) {\n position: absolute;\n width: 100%;\n height: 15px;\n background-color: #edff00\n}\n\nbutton span:nth-child(1) {\n top: -100%;\n left: 0%;\n right: 0;\n}\n\nbutton:hover span:nth-child(1) {\n top: 0%;\n}\n\nbutton span:nth-child(2) {\n top: 10px;\n right: 100%;\n}\n\nbutton:hover span:nth-child(2) {\n right: 0;\n}\n\nbutton span:nth-child(3) {\n top: 20px;\n left: 100%;\n right: 0;\n}\n\nbutton:hover span:nth-child(3) {\n left: 0;\n}\n\nbutton span:nth-child(4) {\n bottom: -100%;\n left: 0;\n}\n\nbutton:hover span:nth-child(4) {\n bottom: 0;\n}\n\n/* End Button 1 */"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"b56b07","snapshot":null,"tags":null,"title":"button by eslam-hany","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":592,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n position: relative;\n padding: 10px 50px;\n font-size: 20px;\n border: 1px solid #002B5B;\n text-transform: uppercase;\n cursor: pointer;\n border-radius: 15px;\n transition: all 0.5s;\n z-index: 1;\n}\n\n.btn:hover {\n transform: scale(1.1);\n color: #fff;\n transition: all 0.5s;\n}\n\n.btn::after {\n position: absolute;\n content: \"\";\n top: 50%;\n left: 50%;\n width: 0%;\n height: 100%;\n border-radius: 15px;\n background: linear-gradient(#002B5b,#EA5455);\n transition: all 0.5s;\n z-index: -1;\n}\n\n.btn:hover::after {\n top: 0%;\n left: 0%;\n width: 100%;\n transition: all 0.5s;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"1e55d9","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":861,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n position: relative;\n height: 50px;\n padding: 0 30px;\n border: 2px solid red;\n background: #e8e8e8;\n user-select: none;\n white-space: nowrap;\n transition: all .05s linear;\n color: red;\n font-family: inherit;\n}\n\nbutton:before, button:after {\n content: \"\";\n position: absolute;\n background: #e8e8e8;\n transition: all .2s linear;\n}\n\nbutton:before {\n width: calc(100% + 6px);\n height: calc(100% - 16px);\n top: 8px;\n left: -3px;\n}\n\nbutton:after {\n width: calc(100% - 16px);\n height: calc(100% + 6px);\n top: -3px;\n left: 8px;\n}\n\nbutton:hover {\n cursor: crosshair;\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\nbutton:hover:before {\n height: calc(100% - 32px);\n top: 16px;\n}\n\nbutton:hover:after {\n width: calc(100% - 32px);\n left: 16px;\n}\n\nbutton span {\n font-size: 15px;\n z-index: 3;\n position: relative;\n font-weight: 600;\n}"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"765dc7","snapshot":null,"tags":null,"title":"button by pritamjoardar","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16897,"cssLen":2063,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n padding: 15px 45px;\n background: #f0e644;\n font-size: 17px;\n font-weight: 500;\n color: #181818;\n cursor: pointer;\n border: 1px solid #fec195;\n border-radius: 50px;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));\n}\n\nbutton:hover {\n border: 1px solid #f3b182;\n background: linear-gradient(\n 85deg,\n #fec195,\n #fcc196,\n #fabd92,\n #fac097,\n #fac39c\n );\n animation: wind 2s ease-in-out infinite;\n}\n\n@keyframes wind {\n 0% {\n background-position: 0% 50%;\n }\n\n 0% {\n background-position: 50% 100%;\n }\n\n 0% {\n background-position: 0% 50%;\n }\n}\n\n.icon-1 {\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n transform-origin: 0 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));\n}\n\nbutton:hover .icon-1 {\n animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;\n transform: rotate(10deg);\n}\n\n@keyframes slay-1 {\n 0% {\n transform: rotate(10deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(10deg);\n }\n}\n\n.icon-2 {\n position: absolute;\n top: 0;\n left: 25px;\n width: 12px;\n transform-origin: 50% 0;\n transform: rotate(10deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-2 {\n animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n\n.icon-3 {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n transform-origin: 50% 0;\n transform: rotate(-5deg);\n transition: all 1s ease-in-out;\n filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));\n}\n\nbutton:hover .icon-3 {\n animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;\n transform: rotate(0);\n}\n\n@keyframes slay-3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"95386b","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":896,"cssLen":2824,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":"button {\n width: 180px;\n height: 55px;\n border-radius: 50px;\n border: solid 4px rgba(255, 255, 255, 0);\n background-clip: padding-box;\n box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);\n background-color: hsl(241deg 44% 49%);\n font-size: 20px;\n letter-spacing: 1px;\n font-weight: 100;\n position: relative;\n cursor: pointer;\n color: white;\n}\n\n.loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n z-index: 0;\n}\n\n.loading i {\n width: 5px;\n height: 5px;\n background-color: white;\n display: inline-flex;\n border-radius: 100%;\n animation-name: loading5234;\n animation-iteration-count: infinite;\n animation-duration: 1s;\n}\n\n@keyframes loading5234 {\n 100% {\n opacity: 0;\n }\n}\n\ninput:checked + button {\n transition-delay: 4s;\n background-color: #31cb20;\n box-shadow: 0 4px 20px -2px rgb(49 203 32);\n}\n\n.title, .approved {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n display: block;\n font-size: 15px;\n}\n\nbutton .title {\n background-color: hsl(241deg 44% 49%);\n width: 90%;\n}\n\ninput:checked + button .approved {\n transition-delay: 4s;\n visibility: visible;\n opacity: 1;\n background-color: #31cb20;\n width: 90%;\n}\n\ninput:checked + button .title {\n visibility: hidden;\n opacity: 0;\n transition: all .5s ease;\n}\n\ninput:not(:checked) + button .approved {\n visibility: hidden;\n opacity: 1;\n}\n\ninput {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n z-index: 999;\n outline: none;\n width: 210px;\n height: 60px;\n border-radius: 50px;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.plane {\n width: 55px;\n height: 55px;\n border-radius: 100%;\n position: absolute;\n left: 0;\n z-index: 9;\n top: 0;\n transition: none;\n background-color: transparent;\n opacity: 0;\n}\n\n.plane svg {\n width: 45px;\n height: 45px;\n position: absolute;\n left: 0px;\n top: 0px;\n transform: rotate(90deg) translate(-50%,-40%) scale(1);\n transition: all 0s ease;\n fill: #3c4a57;\n}\n\ninput:checked + button .plane {\n animation: airplane-route 4s forwards;\n animation-timing-function: cubic-bezier(0, 0, 0, 0);\n}\n\n@keyframes airplane-route {\n 0% {\n left: -300px;\n opacity: 1;\n transform: scale(2);\n }\n\n 20% {\n left: 0px;\n transform: scale(1);\n opacity: 1;\n }\n\n 40% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%);\n }\n\n 60% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%) translateY(-6%) rotate(180deg);\n }\n\n 80% {\n left: 0%;\n opacity: 1;\n top: -6px;\n transform: translateX(0%) rotate(180deg);\n }\n\n 100% {\n left: 0%;\n opacity: 1;\n transform: translateX(0%) rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:59:57.000Z","isPrivate":0,"projectId":"3b5d4e","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":162,"cssLen":596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".game-button {\n background-color: #ff7979;\n color: #fff;\n border: none;\n border-radius: 20px;\n padding: 10px 20px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: bold;\n box-shadow: 2px 2px 10px #ff7979;\n transition: all 0.2s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.play-icon {\n width: 24px;\n height: 24px;\n fill: #fff;\n margin-right: 10px;\n}\n\n.game-button:hover {\n background-color: #2f3640;\n color: #ff7979;\n box-shadow: 2px 2px 20px #2f3640;\n transform: translateY(-2px);\n}\n"},{"created":"2024-01-22T16:59:56.000Z","isPrivate":0,"projectId":"d05999","snapshot":null,"tags":null,"title":"button by gauravsharmadriveit","updated":"2024-01-22T16:59:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":694,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n font-weight: 600;\n display: inline-block;\n position: relative;\n border: 3px solid #fff;\n padding: 15px 60px;\n font-size: 16px;\n}\n\n.button::after, .button::before {\n position: absolute;\n content: \"\";\n width: 0;\n height: 0;\n transition: .5s;\n}\n\nbutton::after {\n top: -3px;\n left: -3px;\n border-top: 3px solid transparent;\n border-left: 3px solid transparent;\n}\n\nbutton::before {\n bottom: -3px;\n right: -3px;\n border-bottom: 3px solid transparent;\n border-right: 3px solid transparent;\n}\n\nbutton:hover {\n color: #0668C9;\n cursor: pointer;\n}\n\nbutton:hover::after,\nbutton:hover::before {\n width: calc(50% + 3px);\n height: calc(50% + 3px);\n border-color: #0668C9;\n}"}]}},"actionData":null,"errors":null}