{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"34f1c0","snapshot":null,"tags":null,"title":"button by pote-fu","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":822,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 17px;\n padding: 1em 2.7em;\n font-weight: 500;\n background: rgb(0,71,157);\n background: linear-gradient(90deg, rgba(0,71,157,1) 0%, rgba(23,178,255,1) 100%);\n color: #000;\n font-weight: 900;\n border: none;\n position: relative;\n overflow: hidden;\n border-radius: 0.6em;\n box-shadow: 0 0 10px #7f7f7f;\n transition: 0.2s;\n}\n\n.label {\n position: relative;\n top: -1px;\n}\n\n.transition {\n transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);\n transition-duration: 400ms;\n background: #ffffff;\n border-radius: 9999px;\n width: 10em;\n height: 10em;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\nbutton:hover .transition {\n width: 0;\n height: 0;\n}\n\nbutton:hover {\n transition: 0.2s;\n color: #fff;\n}\n\nbutton:active {\n transform: scale(0.97);\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"9070b7","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":576,"cssLen":5530,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".uiverse {\n --duration: 7s;\n --easing: linear;\n --c-color-1: rgba(26, 163, 255, .7);\n /* Changed color */\n --c-color-2: #1aff1a;\n /* Changed color */\n --c-color-3: #ff1a75;\n /* Changed color */\n --c-color-4: rgba(26, 232, 255, .7);\n /* Changed color */\n --c-shadow: rgba(87, 223, 255, .5);\n /* Changed color */\n --c-shadow-inset-top: rgba(52, 223, 255, .9);\n /* Changed color */\n --c-shadow-inset-bottom: rgba(215, 250, 255, .8);\n /* Changed color */\n --c-radial-inner: #15d2ff;\n /* Changed color */\n --c-radial-outer: #72faff;\n /* Changed color */\n --c-color: #fff;\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: none;\n outline: none;\n position: relative;\n cursor: pointer;\n border: none;\n display: table;\n border-radius: 24px;\n padding: 0;\n margin: 0;\n text-align: center;\n font-weight: 600;\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 1.5;\n color: var(--c-color);\n background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);\n box-shadow: 0 0 14px var(--c-shadow);\n}\n\n.uiverse:before {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: 24px;\n box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);\n}\n\n.uiverse .wrapper {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n overflow: hidden;\n border-radius: 24px;\n min-width: 132px;\n padding: 12px 0;\n}\n\n.uiverse .wrapper span {\n display: inline-block;\n position: relative;\n z-index: 1;\n}\n\n.uiverse .wrapper .circle {\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n filter: blur(var(--blur, 8px));\n background: var(--background, transparent);\n transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);\n animation: var(--animation, none) var(--duration) var(--easing) infinite;\n}\n\n.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 {\n --background: var(--c-color-4);\n}\n\n.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 {\n --background: var(--c-color-2);\n --blur: 14px;\n}\n\n.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 {\n --background: var(--c-color-3);\n --blur: 16px;\n}\n\n.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 {\n --background: var(--c-color-1);\n --blur: 12px;\n}\n\n.uiverse .wrapper .circle.circle-1 {\n --x: 0;\n --y: -40px;\n --animation: circle-1;\n}\n\n.uiverse .wrapper .circle.circle-2 {\n --x: 92px;\n --y: 8px;\n --animation: circle-2;\n}\n\n.uiverse .wrapper .circle.circle-3 {\n --x: -12px;\n --y: -12px;\n --animation: circle-3;\n}\n\n.uiverse .wrapper .circle.circle-4 {\n --x: 80px;\n --y: -12px;\n --animation: circle-4;\n}\n\n.uiverse .wrapper .circle.circle-5 {\n --x: 12px;\n --y: -4px;\n --animation: circle-5;\n}\n\n.uiverse .wrapper .circle.circle-6 {\n --x: 56px;\n --y: 16px;\n --animation: circle-6;\n}\n\n.uiverse .wrapper .circle.circle-7 {\n --x: 8px;\n --y: 28px;\n --animation: circle-7;\n}\n\n.uiverse .wrapper .circle.circle-8 {\n --x: 28px;\n --y: -4px;\n --animation: circle-8;\n}\n\n.uiverse .wrapper .circle.circle-9 {\n --x: 20px;\n --y: -12px;\n --animation: circle-9;\n}\n\n.uiverse .wrapper .circle.circle-10 {\n --x: 64px;\n --y: 16px;\n --animation: circle-10;\n}\n\n.uiverse .wrapper .circle.circle-11 {\n --x: 4px;\n --y: 4px;\n --animation: circle-11;\n}\n\n.uiverse .wrapper .circle.circle-12 {\n --blur: 14px;\n --x: 52px;\n --y: 4px;\n --animation: circle-12;\n}\n\n@keyframes circle-1 {\n 33% {\n transform: translate(0px, 16px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 64px) translateZ(0);\n }\n}\n\n@keyframes circle-2 {\n 33% {\n transform: translate(80px, -10px) translateZ(0);\n }\n\n 66% {\n transform: translate(72px, -48px) translateZ(0);\n }\n}\n\n@keyframes circle-3 {\n 33% {\n transform: translate(20px, 12px) translateZ(0);\n }\n\n 66% {\n transform: translate(12px, 4px) translateZ(0);\n }\n}\n\n@keyframes circle-4 {\n 33% {\n transform: translate(76px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(112px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-5 {\n 33% {\n transform: translate(84px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(40px, -32px) translateZ(0);\n }\n}\n\n@keyframes circle-6 {\n 33% {\n transform: translate(28px, -16px) translateZ(0);\n }\n\n 66% {\n transform: translate(76px, -56px) translateZ(0);\n }\n}\n\n@keyframes circle-7 {\n 33% {\n transform: translate(8px, 28px) translateZ(0);\n }\n\n 66% {\n transform: translate(20px, -60px) translateZ(0);\n }\n}\n\n@keyframes circle-8 {\n 33% {\n transform: translate(32px, -4px) translateZ(0);\n }\n\n 66% {\n transform: translate(56px, -20px) translateZ(0);\n }\n}\n\n@keyframes circle-9 {\n 33% {\n transform: translate(20px, -12px) translateZ(0);\n }\n\n 66% {\n transform: translate(80px, -8px) translateZ(0);\n }\n}\n\n@keyframes circle-10 {\n 33% {\n transform: translate(68px, 20px) translateZ(0);\n }\n\n 66% {\n transform: translate(100px, 28px) translateZ(0);\n }\n}\n\n@keyframes circle-11 {\n 33% {\n transform: translate(4px, 4px) translateZ(0);\n }\n\n 66% {\n transform: translate(68px, 20px) translateZ(0);\n }\n}\n\n@keyframes circle-12 {\n 33% {\n transform: translate(56px, 0px) translateZ(0);\n }\n\n 66% {\n transform: translate(60px, -32px) translateZ(0);\n }\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"66a09b","snapshot":null,"tags":null,"title":"button by ramdaniAli","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":982,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n color: #4181f098;\n text-transform: uppercase;\n letter-spacing: 5px;\n /* border: none; */\n font-weight: bold;\n font-size: 17px;\n padding: 1rem 2rem;\n border: 1px solid #ffffff1f;\n border-radius: 20px;\n background: #ebebeb;\n -webkit-box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n -webkit-transition: box-shadow 0.3s ease-in-out;\n transition: box-shadow 0.3s ease-in-out;\n}\n\nbutton:hover {\n color: #357af0;\n background: linear-gradient(145deg, #d4d4d4, #fbfbfb);\n -webkit-box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n box-shadow: 5px 5px 15px #cccccc,\n -5px -5px 15px #ffffff;\n}\n\nbutton:active {\n color: #357af0;\n background: #ebebeb;\n -webkit-box-shadow: inset 5px 5px 15px #cccccc,\n inset -5px -5px 15px #ffffff;\n box-shadow: inset 5px 5px 15px #cccccc,\n inset -5px -5px 15px #ffffff;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"68e169","snapshot":null,"tags":null,"title":"button by Pradeepsaranbishnoi","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":2073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t

\n\t\n\t

\t\t","css":".container .btn {\n position: relative;\n top: 0;\n left: 0;\n width: 160px;\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: #000;\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, /*chnage 1*/\n.container .btn:nth-child(1)::after {\n background: #ff1f71;\n box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,\n\t\t0 0 60px #ff1f71;\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"75ad37","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":101,"cssLen":1131,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 200px;\n padding: 20px 40px;\n position: relative;\n display: block;\n text-decoration: none;\n overflow: hidden;\n border: 0;\n cursor: pointer;\n border-radius: 2rem;\n box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);\n}\n\n.button:hover .wave {\n top: -120px;\n}\n\n.text {\n position: relative;\n z-index: 1;\n color: white;\n font-size: 15px;\n letter-spacing: 3px;\n font-weight: 600;\n}\n\n.wave {\n width: 200px;\n height: 200px;\n background-color: #27a9ff;\n box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);\n position: absolute;\n left: 0;\n top: -70px;\n transition: 0.4s;\n}\n\n.wave::before, a .wave::after {\n width: 200%;\n height: 200%;\n content: \"\";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -75%);\n}\n\n.wave::before {\n border-radius: 45%;\n background-color: #0581b3;\n animation: wave 5s linear infinite;\n}\n\n.wave::after {\n border-radius: 40%;\n background-color: rgba(20, 20, 20, 0.5);\n animation: wave 10s linear infinite;\n}\n\n@keyframes wave {\n 0% {\n transform: translate(-50%, -75%) rotate(0deg);\n }\n\n 100% {\n transform: translate(-50%, -75%) rotate(300deg);\n }\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"e3f777","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3522,"cssLen":1158,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Projects-Button {\n width: fit-content;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px 20px;\n gap: 10px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138));\n transition: all 0.3s;\n box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166);\n}\n.IconContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n height: 25px;\n position: relative;\n}\n.svgBG {\n width: 25px;\n height: auto;\n}\n.svgFG {\n width: 9px;\n height: auto;\n z-index: 2;\n position: absolute;\n}\n.text {\n color: rgb(240, 240, 240);\n font-weight: 500;\n font-size: 16px;\n}\n.Projects-Button:hover .svgFG {\n animation: clockwise 2s linear infinite;\n}\n\n.Projects-Button:hover .svgBG {\n animation: anti-clockwise 2s linear infinite;\n}\n@keyframes clockwise {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes anti-clockwise {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n.Projects-Button:hover {\n background-color: rgb(119, 57, 166);\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"f1feb1","snapshot":null,"tags":null,"title":"button by kennyotsu-monochromia","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n position: relative;\n padding: 24px 64px;\n border-radius: 5px;\n color: #fafafa;\n font-weight: 600;\n font-size: 1rem;\n letter-spacing: 0px;\n background-color: var(--eer-black);\n border: solid 1px var(--night-rider);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);\n font-family: Montserrat;\n}\n\n.button .button-text {\n position: relative;\n z-index: 2;\n}\n\n.button .fill-container {\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n padding-bottom: 100%;\n transform: translateY(-50%) rotate(180deg);\n}\n\n.button .fill-container::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: var(--night-rider);\n border-radius: 50px;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n transform: translateY(-100%);\n}\n\n.button:hover {\n transform: translateY(-4px);\n color: var(--white);\n}\n\n.button:hover .fill-container {\n transform: translateY(-50%) rotate(0);\n}\n\n.button:hover .fill-container::after {\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"4fe1b2","snapshot":null,"tags":null,"title":"button by faxriddin20","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1243,"cssLen":2856,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn {\n height: 4em;\n width: 12em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0px solid black;\n cursor: pointer;\n font-family: sans-serif;\n font-weight: bold;\n}\n\n.wrapper {\n height: 2em;\n width: 8em;\n position: relative;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.text {\n font-size: 17px;\n z-index: 1;\n color: #000;\n padding: 4px 12px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.7);\n transition: none 0.5s;\n}\n\n.flower {\n display: grid;\n grid-template-columns: 1em 1em;\n position: absolute;\n transition: none 0.5s;\n}\n\n.flower1 {\n top: -12px;\n left: -13px;\n transform: rotate(5deg);\n}\n\n.flower2 {\n bottom: -5px;\n left: 8px;\n transform: rotate(35deg);\n}\n\n.flower3 {\n bottom: -15px;\n transform: rotate(0deg);\n}\n\n.flower4 {\n top: -14px;\n transform: rotate(15deg);\n}\n\n.flower5 {\n right: 11px;\n top: -3px;\n transform: rotate(25deg);\n}\n\n.flower6 {\n right: -15px;\n bottom: -15px;\n transform: rotate(30deg);\n}\n\n.petal {\n height: 1em;\n width: 1em;\n border-radius: 40% 70% / 7% 90%;\n background: violet;\n border: 0.5px solid purple;\n z-index: 0;\n transition: width 0.4s, height 0.4s step-start;\n}\n\n.two {\n transform: rotate(90deg);\n}\n\n.three {\n transform: rotate(270deg);\n}\n\n.four {\n transform: rotate(180deg);\n}\n\n.btn:hover .petal {\n background: violet;\n border: 0.5px solid purple;\n}\n\n.btn:hover .flower {\n grid-template-columns: 1.5em 1.5em;\n}\n\n.btn:hover .flower .petal {\n width: 1.5em;\n height: 1.5em;\n}\n\n.btn:hover .text {\n background: rgba(255, 255, 255, 0.4);\n}\n\n.btn:hover div.flower1 {\n animation: 15s linear 0s normal none infinite running flower1;\n}\n\n@keyframes flower1 {\n 0% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: rotate(365deg);\n }\n}\n\n.btn:hover div.flower2 {\n animation: 13s linear 1s normal none infinite running flower2;\n}\n\n@keyframes flower2 {\n 0% {\n transform: rotate(35deg);\n }\n\n 100% {\n transform: rotate(-325deg);\n }\n}\n\n.btn:hover div.flower3 {\n animation: 16s linear 1s normal none infinite running flower3;\n}\n\n@keyframes flower3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.btn:hover div.flower4 {\n animation: 17s linear 1s normal none infinite running flower4;\n}\n\n@keyframes flower4 {\n 0% {\n transform: rotate(15deg);\n }\n\n 100% {\n transform: rotate(375deg);\n }\n}\n\n.btn:hover div.flower5 {\n animation: 20s linear 1s normal none infinite running flower5;\n}\n\n@keyframes flower5 {\n 0% {\n transform: rotate(25deg);\n }\n\n 100% {\n transform: rotate(-335deg);\n }\n}\n\n.btn:hover div.flower6 {\n animation: 15s linear 1s normal none infinite running flower6;\n}\n\n@keyframes flower6 {\n 0% {\n transform: rotate(30deg);\n }\n\n 100% {\n transform: rotate(390deg);\n }\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"89c4b6","snapshot":null,"tags":null,"title":"button by Lealdos","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":627,"cssLen":1111,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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-color: RGB(29, 185, 84);\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: 18px;\n}\n\n.sign svg path {\n fill: black;\n}\n/* text */\n.text {\n position: absolute;\n right: 0%;\n width: 0%;\n opacity: 0;\n color: black;\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"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"f4ac1f","snapshot":null,"tags":null,"title":"button by LightAndy1","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1180,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".signin {\n float: right;\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n font-family: \"Montserrat\", sans-serif;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(255, 255, 255, 0.25);\n gap: 0.75rem;\n color: #c4d2dc;\n background-color: #19242b;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0, 0.87, 0.12, 1);\n}\n\n.signin:hover {\n transform: scale(1.025);\n}\n\n.signin:active {\n transform: scale(0.975);\n}\n\nbutton svg {\n height: 24px;\n width: auto;\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"030fd1","snapshot":null,"tags":null,"title":"button by seyed-mohsen-mousavi","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":604,"cssLen":2050,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n\n Delete\n\n","css":".mr-2 {\n margin-right: 0.5rem;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-5 {\n height: 1.25rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.items-center {\n align-items: center;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.delay-75 {\n transition-delay: 75ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\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.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:00:47.000Z","isPrivate":0,"projectId":"7a7bb3","snapshot":null,"tags":null,"title":"button by Javierrocadev","updated":"2024-01-22T17:00:47.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":931,"cssLen":3029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Hover me!\n \n \n \n Explore!\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.-left-2 {\n left: -0.5rem;\n}\n.-top-8 {\n top: -2rem;\n}\n.left-6 {\n left: 1.5rem;\n}\n.top-2 {\n top: 0.5rem;\n}\n.top-2\\.5 {\n top: 0.625rem;\n}\n.z-10 {\n z-index: 10;\n}\n.h-12 {\n height: 3rem;\n}\n.h-32 {\n height: 8rem;\n}\n.w-32 {\n width: 8rem;\n}\n.w-36 {\n width: 9rem;\n}\n.origin-left {\n transform-origin: left;\n}\n.rotate-12 {\n --tw-rotate: 12deg;\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.scale-x-0 {\n --tw-scale-x: 0;\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.transform {\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.cursor-pointer {\n cursor: pointer;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-none {\n border-style: none;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-indigo-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(129 140 248 / var(--tw-bg-opacity));\n}\n.bg-indigo-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.opacity-0 {\n opacity: 0;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.duration-1000 {\n transition-duration: 1000ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.group:hover .group-hover\\:scale-x-100 {\n --tw-scale-x: 1;\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\\:scale-x-50 {\n --tw-scale-x: 0.5;\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\\:opacity-100 {\n opacity: 1;\n}\n.group:hover .group-hover\\:duration-1000 {\n transition-duration: 1000ms;\n}\n.group:hover .group-hover\\:duration-500 {\n transition-duration: 500ms;\n}\n.group:hover .group-hover\\:duration-700 {\n transition-duration: 700ms;\n}\n"}]}},"actionData":null,"errors":null}