{"loaderData":{"0":null,"0-3":{"total":7434,"projects":[{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"c7c016","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":965,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Hover me","css":".jsp {\n /* c'est le lien */\n position: relative;\n display: flex;\n background-color: #DAC0A3;\n padding: 15px 25px;\n font-size: 30px;\n text-transform: none;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n z-index: 2;\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.jsp::before{\n content: '';\n position: absolute;\n height: 75px;\n width: 5px;\n background-color: #FAF1E4; \n opacity: 1;\n inset: 0px;\n left: -5px;\n transition: 0.3s ease-in-out; \n}\n\n.jsp:hover{\n transition: 0.5s;\n transform: translatey(-15px);\n color: #FAF1E4;\n}\n\n.jsp:hover::before{\n transform: translateX(6.5em);\n}\n\n.bck-grnd:hover span {\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.jsp:active {\n transform: scale(0.9);\n\n}\n\n\n "},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"06155d","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border: 1px solid black;\n padding: 12px 30px 12px 30px;\n border-radius: 30px;\n background-color: #ffffff;\n font-weight: bolder;\n font-size: 15px;\n box-shadow: 0px 0px 1px;\n transform: all 2s esase;\n transition-duration: .3s;\n}\n\nbutton:hover {\n transform: translateY(-10px);\n box-shadow: 0px 7px 1px rgb(0, 0, 0);\n border: 1px solid black;\n}\n\nbutton:active {\n transform: translateY(10px);\n box-shadow: 0px 0px 1px;\n}\n \n\n"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"729a62","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3986,"cssLen":667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n height: 4em;\n width: 15em;\n border: none;\n border-radius: 40px;\n background-color: #fff;\n}\n\nbutton span {\n z-index: 1;\n display: inline-block;\n background-color: rgb(67, 67, 255);\n height: 3em;\n width: 11.5em;\n border-radius: 25px;\n color: #fff;\n line-height: 55px;\n font-size: 18px;\n letter-spacing: 3px;\n transition: all 0.5s;\n}\n\nbutton .container {\n z-index: -1;\n width: 0;\n position: relative;\n display: flex;\n justify-content: center;\n transform: translateY(-50px);\n transition: all 0.4s;\n}\n\nbutton .container svg {\n padding: 0 10px;\n}\n\nbutton:hover span {\n width: 0;\n}\n\nbutton:hover .container {\n z-index: 2;\n width: 100%;\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"202477","snapshot":null,"tags":null,"title":"button by fcb4355","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":959,"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 padding: 10px 20px;\n border: none;\n color: #007ffe;\n cursor: pointer;\n transition: .3s;\n transition-delay: .3s;\n z-index: 0;\n}\n\n.button::after {\n position: absolute;\n content: '';\n width: 17px;\n height: 17px;\n background-color: #007ffe;\n right: -20px;\n border-radius: 50%;\n top: 50%;\n transform: translateY(-50%);\n transition: .3s;\n opacity: 0;\n}\n\n.button::before {\n position: absolute;\n z-index: 0;\n content: '';\n width: 17px;\n height: 17px;\n background-color: #007ffe;\n left: -20px;\n border-radius: 50%;\n top: 50%;\n transform: translateY(-50%);\n transition: .3s;\n opacity: 0;\n}\n\nbutton:hover::after {\n z-index: -1;\n right: 0;\n width: 50%;\n height: 100%;\n border-radius: 0;\n opacity: 1;\n}\n\nbutton:hover::before {\n z-index: -1;\n left: 0;\n width: 50%;\n height: 100%;\n border-radius: 0;\n opacity: 1;\n}\n\nbutton:hover {\n color: #fff;\n box-shadow: 10px 50px 50px rgba(52, 152, 219,.2);\n}"},{"created":"2024-01-22T17:00:24.000Z","isPrivate":0,"projectId":"7f8c8f","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":382,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n margin: 0 10px;\n padding: 10px 30px;\n border: 5px solid #DF34DB;\n border-radius: 22px;\n font-size: 20px;\n color: #DF34DB;\n transition: transform 0.1s ease-in, all 0.08s ease-in;\n box-shadow: 0 5px 0 #dd04d9;\n}\n\n.button:hover {\n border-color: #ff00c8;\n box-shadow: 0 5px 0 #ff00c8;\n}\n\n.button:active {\n transform: translateY(5px);\n box-shadow: 0 0 0 #DF34DB;\n}"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"d1c25a","snapshot":null,"tags":null,"title":"button by ercnersoy","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n padding: 20px 30px;\n border-radius: 30px;\n border: 5px solid #ffffff;\n background-color: #5584AC;\n font-size: 15px;\n color: white;\n letter-spacing: 5px;\n font-weight: bolder;\n animation: none;\n transition: all .5s ease-in-out;\n font-family: 'Rajdhani', sans-serif;\n}\n\nbutton:hover {\n border-radius: 30px 30px 0px 30px;\n box-shadow: inset 0px 30px 10px -25px black;\n transition: all .5s ease-in-out;\n animation: bounce42 1.6s infinite;\n}\n\n@keyframes bounce42 {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n\n 40% {\n transform: translateY(-5px);\n }\n\n 60% {\n transform: translateY(-5px);\n }\n} "},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"e70408","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":1428,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n","css":"@keyframes floating {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-5px);\n }\n}\n\n@keyframes particles {\n 0% {\n transform: translateZ(0, 0);\n opacity: 1;\n }\n\n 100% {\n transform: translate(190px, 50px);\n opacity: 0;\n }\n}\n\n.button {\n position: relative;\n background: rgba(57, 57, 57, 0.7);\n display: inline-block;\n background-size: 200% auto;\n border: 1px solid;\n border-radius: 25px;\n color: white;\n padding: 10px 20px;\n font-size: 18px;\n text-transform: uppercase;\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);\n animation: floating 3s ease-in-out infinite;\n transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n border-radius: 30px;\n box-shadow: 0 0 20px #FF7730;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n width: 5px;\n height: 5px;\n background: #FF7730;\n animation: particles 2s infinite;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.button:hover {\n color: #FFB900;\n box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);\n transform: scale(1.05);\n background-position: right center;\n background: linear-gradient(to right, #FFB900, #FF7730);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"ce06dd","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":337,"cssLen":761,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".Btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100px;\n height: 40px;\n border: none;\n padding: 0px 20px;\n background: linear-gradient(to right, #8be3fc, #576bff);\n color: white;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n border-radius: 12px;\n box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);\n transition-duration: 0.3s;\n}\n\n.svg {\n width: 12px;\n position: absolute;\n right: 0;\n margin-right: 20px;\n fill: white;\n transition-duration: 0.3s;\n}\n\n.Btn:hover {\n color: transparent;\n}\n\n.Btn:hover svg {\n right: 43%;\n margin: 0;\n padding: 0;\n border: none;\n transition-duration: 0.3s;\n}\n\n.Btn:active {\n transform: translate(3px, 3px);\n transition-duration: 0.3s;\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"1dcaa9","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1467,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: inline-block;\n padding: 12px 24px;\n font-size: 16px;\n font-weight: bold;\n text-transform: uppercase;\n color: #fff;\n background-color: #ff4081;\n border: none;\n border-radius: 50px;\n transition: background-color 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-color: rgba(255, 64, 129, 0.6);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.4s ease;\n z-index: -1;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-size: 30px 30px;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.button:hover {\n background-color: #e91e63;\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);\n}\n\n.button:hover::before {\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:hover::after {\n opacity: 1;\n}\n\n.button:active {\n background-color: #e91e63;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"a55def","snapshot":null,"tags":null,"title":"button by roroland","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1530,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".flip-button {\n --col1: #4CAF50;\n --col2: #4f16ac;\n --col3: #d8d1e4;\n position: relative;\n min-width: 10rem;\n min-height: 3rem;\n perspective: 500px;\n}\n\n.flip-button .button {\n appearance: none;\n position: absolute;\n inset: 0;\n height: 100%;\n border-radius: 30px;\n font-size: .75em;\n font-weight: bold;\n color: #fff;\n text-transform: uppercase;\n background-color: var(--col1);\n border: none;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n transition: all 1s ease-out .5s;\n transform-style: preserve-3d;\n width: 100%;\n}\n\n.flip-button:hover .button {\n background-color: var(--col2);\n cursor: pointer;\n transform: rotateY(180deg) scale(1.5);\n transition: all .3s ease-out;\n}\n\n.flip-button:hover .button:active {\n background-color: rgba(81, 23, 173, 0.75);\n transform: rotateY(180deg) scale(1.45);\n outline: 10px solid var(--col3);\n transition: all .1s ease-out;\n}\n\n.flip-button .button::after {\n content: '';\n box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.25);\n display: block;\n border-radius: 30px;\n height: 100%;\n width: 100%;\n transition: all .3s ease-out .95s;\n}\n\n.flip-button:hover .button::after {\n box-shadow: 0px 0px 1px 10px rgba(160, 29, 149, 0.15);\n transition: all .3s ease-out;\n}\n\n.flip-button .text-front,\n.flip-button .text-back {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n padding: 0 1.5em;\n transform: translate(-50%, -50%);\n backface-visibility: hidden;\n width: 100%;\n}\n\n.flip-button .text-back {\n transform: translate(-50%, -50%) rotateY(180deg);\n}\n\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"56bb6e","snapshot":null,"tags":null,"title":"button by SteveBloX","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":317,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n width: 150px;\n height: 60px;\n border: 3px solid #343a40;\n border-radius: 45px;\n transition: all 0.3s;\n cursor: pointer;\n background: white;\n font-size: 1.2em;\n font-weight: 550;\n font-family: \"Montserrat\", sans-serif;\n}\n\nbutton:hover {\n background: #343a40;\n color: white;\n font-size: 1.5em;\n}\n"},{"created":"2024-01-22T17:00:23.000Z","isPrivate":0,"projectId":"132a57","snapshot":null,"tags":null,"title":"button by tranphattrien","updated":"2024-01-22T17:00:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":509,"cssLen":3327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".relative {\n position: relative\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem\n}\n\n.flex {\n display: flex\n}\n\n.h-\\[50px\\] {\n height: 50px\n}\n\n.w-\\[150px\\] {\n width: 150px\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.text-\\[\\#fff\\] {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:-left-full::before {\n content: var(--tw-content);\n left: -100%\n}\n\n.before\\:top-0::before {\n content: var(--tw-content);\n top: 0px\n}\n\n.before\\:z-\\[-1\\]::before {\n content: var(--tw-content);\n z-index: -1\n}\n\n.before\\:h-full::before {\n content: var(--tw-content);\n height: 100%\n}\n\n.before\\:w-full::before {\n content: var(--tw-content);\n width: 100%\n}\n\n.before\\:rounded-xl::before {\n content: var(--tw-content);\n border-radius: 0.75rem\n}\n\n.before\\:bg-gradient-to-r::before {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.before\\:from-\\[\\#009b49\\]::before {\n content: var(--tw-content);\n --tw-gradient-from: #009b49 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 155 73 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.before\\:to-\\[rgb\\(105\\2c 184\\2c 141\\)\\]::before {\n content: var(--tw-content);\n --tw-gradient-to: rgb(105,184,141) var(--tw-gradient-to-position)\n}\n\n.before\\:transition-all::before {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.before\\:ease-in-out::before {\n content: var(--tw-content);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.hover\\:before\\:left-0:hover::before {\n content: var(--tw-content);\n left: 0px\n}"}]}},"actionData":null,"errors":null}