{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"17e501","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1110,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n appearance: button;\n background-color: #999;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n box-sizing: border-box;\n color: #FFFFFF;\n cursor: pointer;\n display: inline-block;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: .8px;\n line-height: 20px;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 13px 19px;\n text-align: center;\n text-transform: uppercase;\n touch-action: manipulation;\n transform: translateZ(0);\n transition: filter .2s;\n user-select: none;\n -webkit-user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n}\n\nbutton:after {\n background-clip: padding-box;\n background-color: #222;\n border: solid transparent;\n border-radius: 16px;\n border-width: 0 0 4px;\n bottom: -4px;\n content: \"\";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n}\n\nbutton:main, button:focus {\n user-select: auto;\n}\n\nbutton:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\nbutton:disabled {\n cursor: auto;\n}\n\nbutton:active:after {\n border-width: 0 0 0px;\n}\n\nbutton:active {\n padding-bottom: 10px;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"1bbbcf","snapshot":null,"tags":null,"title":"button by tarantino421","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":616,"cssLen":1689,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n \n \n \n \n \n \n \n

","css":".box {\n --clr-shadow__border: #3effff;\n --clr-text: #F6F4EB;\n --clr-soundwave: #83e4ac;\n --clr-music: #30858d;\n --size: 3rem;\n position: relative;\n outline: 1px solid var(--clr-shadow__border);\n}\n\n.button {\n background: transparent;\n padding: calc(var(--size) / 3) var(--size);\n font-weight: 600;\n font-size: 1.5rem;\n border: none;\n cursor: pointer;\n color: var(--clr-text);\n letter-spacing: 0.2rem;\n text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),-2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);\n}\n\n.music {\n width: 100%;\n height: 100%;\n bottom: 0%;\n transition: 0.5s ease-in-out;\n z-index: -1;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n background: var(--clr-music);\n}\n\n.box:hover .music {\n opacity: 1;\n}\n\n.soundwave {\n width: 100%;\n border: 1px solid var(--clr-music);\n border-bottom: none;\n background: linear-gradient(to top, var(--clr-soundwave) 70%, var(--clr-music));\n animation: music-animation calc(0.03s * var(--i)) linear infinite;\n opacity: 1;\n}\n\n@keyframes music-animation {\n 0%, 100% {\n height: calc(0.06rem * var(--i));\n }\n\n 10% {\n height: calc(0.04rem * var(--i));\n }\n\n 20% {\n height: calc(0.05rem * var(--i));\n }\n\n 30% {\n height: calc(0.01rem * var(--i));\n }\n\n 40% {\n height: calc(0.07rem * var(--i));\n }\n\n 50% {\n height: calc(0.04rem * var(--i));\n }\n\n 60% {\n height: calc(0.08rem * var(--i));\n }\n\n 70% {\n height: calc(0.06rem * var(--i));\n }\n\n 80% {\n height: calc(0.09rem * var(--i));\n }\n\n 90% {\n height: calc(0.05rem * var(--i));\n }\n}\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"95fbb0","snapshot":null,"tags":null,"title":"button by xantha01","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":317,"cssLen":813,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Get Started ","css":".swipe {\n position: relative;\n background-color: #F1F7F7;\n width: 200px;\n height: 60px;\n color: rgba(255, , 204, 1);\n border-radius: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none;\n letter-spacing: 2px;\n border-top: 0.5px solid rgba(0, 0, 0, 0.35);\n border-left: 0.5px solid rgba(0, 0, 0, 0.35);\n padding-left: 40px;\n cursor: pointer;\n transition: 0.35s ease;\n}\n\n.swipe:hover {\n padding-left: 0;\n padding-right: 40px;\n color: #324B4C;\n}\n\n.container {\n position: absolute;\n left: 5px;\n width: 50px;\n height: 50px;\n background: #7AB5B7;\n border-radius: 50%;\n transition: 0.35s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #f1f4f7;\n}\n\n.swipe:hover .container {\n left: calc(100% - 55px);\n color: #324B4C;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"9d37d2","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1478,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 10px 40px;\n font-size: 18px;\n background-color: #333;\n color: #fff;\n text-shadow: 0 2px 0 rgb(0 0 0 / 25%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border: 0;\n z-index: 1;\n user-select: none;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 1px;\n white-space: unset;\n padding: .8rem 1.5rem;\n text-decoration: none;\n font-weight: 900;\n transition: all 0.7s cubic-bezier(0,.8,.26,.99);\n}\n\nbutton:before {\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n content: '';\n transition: .7s cubic-bezier(0,.8,.26,.99);\n z-index: -1;\n background-color: #333!important;\n box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;\n}\n\nbutton:after {\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n content: '';\n box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);\n transition: .7s cubic-bezier(0,.8,.26,.99);\n}\n\nbutton:hover:before {\n box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;\n}\n\nbutton:hover:after {\n box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);\n}\n\nbutton:active {\n transform: translateY(4px);\n}\n\nbutton:active:after {\n box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"ecd330","snapshot":null,"tags":null,"title":"button by Roopaish","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":2343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n outline: none;\n border: none;\n cursor: pointer;\n padding: 10px 20px;\n font-size: 12px;\n font-weight: 700;\n color: hsl(0, 0%, 100%);\n border-radius: 10px;\n text-transform: uppercase;\n transition: all 0.2s ease-in-out;\n position: relative;\n background-color: #ff0081;\n box-shadow: rgba(233, 30, 99, 0.5);\n}\n\nbutton::after,\nbutton::before {\n transition: all 0.2s ease-in-out;\n}\n\nbutton::before {\n z-index: -1;\n position: absolute;\n content: \"\";\n left: -2em;\n right: -2em;\n top: -2em;\n bottom: -2em;\n background-repeat: no-repeat;\n background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n /* */\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),\n radial-gradient(circle, #ff0081 20%, transparent 20%),\n radial-gradient(circle, transparent 10%, white 20%, transparent 20%);\n background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,\n 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,\n 20% 20%;\n background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,\n 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,\n 64% 70%, 80% 71%;\n}\n\nbutton:hover::before {\n background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,\n 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,\n 100% 100%;\n background-size: 0% 0%;\n transition: background-position 0.5s ease-in-out,\n background-size 0.75s ease-in-out;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"4c3c02","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":628,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn {\n --color: #3dd5f3;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .5s;\n border: none;\n background-color: transparent;\n}\n\n.btn div {\n letter-spacing: 2px;\n font-weight: bold;\n background: var(--color);\n border-radius: 2rem;\n color: black;\n padding: 1rem;\n}\n\n.btn::before {\n content: '';\n z-index: -1;\n background-color: var(--color);\n border: 2px solid black;\n border-radius: 2rem;\n width: 110%;\n height: 100%;\n position: absolute;\n transform: rotate(10deg);\n transition: .5s;\n opacity: 0.2;\n}\n\n.btn:hover {\n cursor: pointer;\n filter: brightness(1.2);\n transform: scale(1.1);\n}\n\n.btn:hover::before {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.btn svg {\n transform: translateX(-200%);\n transition: .5s;\n width: 0;\n opacity: 0;\n}\n\n.btn:hover svg {\n width: 25px;\n transform: translateX(0%);\n opacity: 1;\n}\n\n.btn:active {\n filter: brightness(1.4);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"8f640d","snapshot":null,"tags":null,"title":"button by csemszepp","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":2163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t

\t\n","css":".container {\n width: 1000px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n}\n\n.container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 250px;\n height: 50px;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .btn a {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 30px;\n padding: 10px;\n letter-spacing: 1px;\n text-decoration: none;\n overflow: hidden;\n color: #fff;\n font-weight: 400px;\n z-index: 1;\n transition: 0.5s;\n backdrop-filter: blur(15px);\n}\n\n.container .btn:hover a {\n letter-spacing: 3px;\n}\n\n.container .btn a::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);\n transform: skewX(45deg) translate(0);\n transition: 0.5s;\n filter: blur(0px);\n}\n\n.container .btn:hover a::before {\n transform: skewX(45deg) translate(200px);\n}\n\n.container .btn::before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n bottom: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::before /*lightup button*/ {\n bottom: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translatex(-50%);\n top: -5px;\n width: 30px;\n height: 10px;\n background: #f00;\n border-radius: 10px;\n transition: 0.5s;\n transition-delay: 0.5;\n}\n\n.container .btn:hover::after /*lightup button*/ {\n top: 0;\n height: 50%;\n width: 80%;\n border-radius: 30px;\n}\n\n.container .btn:nth-child(1)::before,\n.container .btn:nth-child(1)::after {\n background: #1eff45;\n box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45,\n\t\t0 0 60px #1eff45;\n}\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"1ea4f1","snapshot":null,"tags":null,"title":"button by Bodyhc","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":968,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(66, 13, 240);\n width: 200px;\n height: 50px;\n border-radius: 10px;\n font-size: 18px;\n outline: 3px solid #270092;\n cursor: pointer;\n transition: ease-out .5s;\n}\n\n.button:hover {\n width: 180px;\n height: 60px;\n outline-offset: 4px;\n transform: scale(1.3) rotate(2deg);\n background-color: blue;\n box-shadow: 5px 20px #cdcbd4\n}\n\n.icon {\n color: #270092;\n margin-right: 5px;\n}\n\n.share {\n margin-left: 5px;\n color: #fff;\n}\n\n"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"dae43f","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1326,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n height: 50px;\n margin: 5px;\n width: 120px;\n cursor: pointer;\n background: #7C4DFF;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-family: Consolas, Courier New, monospace;\n border: solid #754CFF 1px;\n font-size: 16px;\n color: rgb(161, 161, 161);\n -webkit-transition: 500ms;\n transition: 500ms;\n border-radius: 5px;\n background: linear-gradient(145deg, #4A2A99, #360E6F);\n -webkit-box-shadow: -1px -5px 15px #471C8B, \n 5px 5px 15px #471C8B, \n inset 5px 5px 10px #360E6F, \n inset -5px -5px 10px #360E6F;\n box-shadow: -1px -5px 15px #471C8B, \n 5px 5px 15px #471C8B, \n inset 5px 5px 10px #360E6F, \n inset -5px -5px 10px #360E6F;\n}\n\nbutton:hover {\n -webkit-box-shadow: 1px 1px 13px #300A67,\n -1px -1px 13px #4A2A99;\n box-shadow: 1px 1px 13px #300A67,\n -1px -1px 13px #4A2A99;\n color: #d6d6d6;\n -webkit-transition: 500ms;\n transition: 500ms;\n}\n\nbutton:active {\n -webkit-box-shadow: 1px 1px 13px #300A67,\n -1px -1px 33px #4A2A99;\n box-shadow: 1px 1px 13px #300A67,\n -1px -1px 33px #4A2A99;\n color: #d6d6d6;\n -webkit-transition: 100ms;\n transition: 100ms;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"b5de3e","snapshot":null,"tags":null,"title":"button by flxderdev","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":45,"cssLen":1512,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n height: 55px;\n width: 175px;\n margin: auto;\n align-items: center;\n border-radius: 50px;\n border: none;\n text-align: center;\n color: transparent;\n text-shadow: 0 0 0 rgb(255, 255, 255);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n transition: transform 50ms ease;\n background: linear-gradient(90deg, #fdec53, #f441a5, #b81fff, #5f03f4);\n color: #ffffff;\n text-shadow: rgba(140, 0, 255, 0.9) 0px 0px 20px;\n background-size: 400%;\n animation: welcome 0.5s ease 0s 1 normal forwards;\n display: block;\n margin-right: auto;\n margin-left: auto;\n font-family: \"Montserrat\", sans-serif;\n}\n\n.button:hover {\n -webkit-box-shadow: 0px 0px 15px 0px rgba(230, 219, 67, 0.9);\n -moz-box-shadow: 0px 0px 15px 0px rgba(224, 178, 78, 0.9);\n box-shadow: 0px 0px 15px 0px rgba(212, 133, 109, 0.9);\n animation: animate 8s ease infinite;\n transition: box-shadow, 0.4s;\n border: none;\n font-size: 19px;\n transform: scale(1.05, 1.05);\n background: linear-gradient(90deg, #fdec53, #cc5e4a, #dfad41, #fdec53);\n background-size: 400%;\n animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite,\n}\n\n@keyframes animate {\n 0% {\n background-position: 0%;\n }\n\n 100% {\n background-position: 400%;\n }\n}\n\n@keyframes spin {\n 0% {\n --rotate: 0deg;\n }\n\n 100% {\n --rotate: 360deg;\n }\n}\n\n.button:hover:before {\n filter: blur(20px);\n opacity: 1;\n animation: animate 8s linear infinite;\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"ec2f2a","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":521,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --bg-color-sub: #dedede;\n --bg-color: #eee;\n --main-color: #323232;\n position: relative;\n width: 150px;\n height: 40px;\n cursor: pointer;\n display: flex;\n align-items: center;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n background-color: var(--bg-color);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.button, .button__icon, .button__text {\n transition: all 0.3s;\n}\n\n.button .button__text {\n transform: translateX(30px);\n color: var(--font-color);\n font-weight: 600;\n}\n\n.button .button__icon {\n position: absolute;\n transform: translateX(109px);\n height: 100%;\n width: 39px;\n background-color: var(--bg-color-sub);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button .svg {\n width: 20px;\n fill: var(--main-color);\n}\n\n.button:hover {\n background: var(--bg-color);\n}\n\n.button:hover .button__text {\n color: transparent;\n}\n\n.button:hover .button__icon {\n width: 148px;\n transform: translateX(0);\n}\n\n.button:active {\n transform: translate(3px, 3px);\n box-shadow: 0px 0px var(--main-color);\n}"},{"created":"2024-01-22T17:00:22.000Z","isPrivate":0,"projectId":"afe182","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":626,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n\n","css":".cursor-pointer {\n cursor: pointer;\n}\n.fill-none {\n fill: none;\n}\n.stroke-red-400 {\n stroke: #f87171;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:rotate-90:hover {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:fill-red-800 {\n fill: #991b1b;\n}\n.group:active .group-active\\:fill-red-600 {\n fill: #dc2626;\n}\n.group:active .group-active\\:stroke-red-200 {\n stroke: #fecaca;\n}\n.group:active .group-active\\:duration-0 {\n transition-duration: 0s;\n}\n"}]}},"actionData":null,"errors":null}