{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"e99d7d","snapshot":"https://s1.qingting.work/runjs/733d4019684d.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Custyyyy","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":607,"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 border-radius: 7px;\n border: none;\n background: #1875FF;\n color: white;\n font-family: inherit;\n text-align: center;\n font-size: 13px;\n box-shadow: 0px 14px 56px -11px #1875FF;\n width: 10em;\n padding: 1em;\n transition: all 0.4s;\n cursor: pointer;\n}\n\n.button span {\n cursor: pointer;\n display: inline-block;\n position: relative;\n transition: 0.4s;\n}\n\n.button span:after {\n content: 'for free';\n position: absolute;\n opacity: 0;\n top: 0;\n right: -20px;\n transition: 0.7s;\n}\n\n.button:hover span {\n padding-right: 3.55em;\n}\n\n.button:hover span:after {\n opacity: 4;\n right: 0;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"21cbee","snapshot":"https://s1.qingting.work/runjs/e454eb98ece6.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by d4niz","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":415,"cssLen":892,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".contactButton {\n background: #7079f0;\n color: white;\n font-family: inherit;\n padding: 0.45em;\n padding-left: 1em;\n font-size: 17px;\n font-weight: 500;\n border-radius: 0.9em;\n border: none;\n cursor: pointer;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n box-shadow: inset 0 0 1.6em -0.6em #714da6;\n overflow: hidden;\n position: relative;\n height: 2.8em;\n padding-right: 3em;\n}\n\n.iconButton {\n margin-left: 1em;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.2em;\n width: 2.2em;\n border-radius: 0.7em;\n box-shadow: 0.1em 0.1em 0.6em 0.2em #7a8cf3;\n right: 0.3em;\n transition: all 0.3s;\n}\n\n.contactButton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em #5566c2;\n}\n\n.contactButton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em #5566c2;\n}\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"cb3ca4","snapshot":"https://s1.qingting.work/runjs/b4763893099f.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":639,"cssLen":1933,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Buy Now

\n \n \n \n

\n\n","css":".button {\n --width: 100px;\n --height: 35px;\n --tooltip-height: 35px;\n --tooltip-width: 90px;\n --gap-between-tooltip-to-button: 18px;\n --button-color: #222;\n --tooltip-color: #fff;\n width: var(--width);\n height: var(--height);\n background: var(--button-color);\n position: relative;\n text-align: center;\n border-radius: 0.45em;\n font-family: \"Arial\";\n transition: background 0.3s;\n}\n\n.button::before {\n position: absolute;\n content: attr(data-tooltip);\n width: var(--tooltip-width);\n height: var(--tooltip-height);\n background-color: #555;\n font-size: 0.9rem;\n color: #fff;\n border-radius: .25em;\n line-height: var(--tooltip-height);\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);\n left: calc(50% - var(--tooltip-width) / 2);\n}\n\n.button::after {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 10px solid transparent;\n border-top-color: #555;\n left: calc(50% - 10px);\n bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);\n}\n\n.button::after,.button::before {\n opacity: 0;\n visibility: hidden;\n transition: all 0.5s;\n}\n\n.text {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button-wrapper,.text,.icon {\n overflow: hidden;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n color: #fff;\n}\n\n.text {\n top: 0\n}\n\n.text,.icon {\n transition: top 0.5s;\n}\n\n.icon {\n color: #fff;\n top: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon svg {\n width: 24px;\n height: 24px;\n}\n\n.button:hover {\n background: #222;\n}\n\n.button:hover .text {\n top: -100%;\n}\n\n.button:hover .icon {\n top: 0;\n}\n\n.button:hover:before,.button:hover:after {\n opacity: 1;\n visibility: visible;\n}\n\n.button:hover:after {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);\n}\n\n.button:hover:before {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));\n}\n\n\n\n"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"edd90e","snapshot":"https://s1.qingting.work/runjs/6f8a30b522af.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Smit-Prajapati","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1336,"cssLen":2651,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background: none;\n border: none;\n}\n\n.button .bloom-container {\n position: relative;\n transition: all 0.2s ease-in-out;\n border: none;\n background: none;\n}\n\n.button .bloom-container .button-container-main {\n width: 110px;\n aspect-ratio: 1;\n border-radius: 50%;\n overflow: hidden;\n position: relative;\n display: grid;\n place-content: center;\n border-right: 5px solid white;\n border-left: 5px solid rgba(128, 128, 128, 0.147);\n transform: rotate(-45deg);\n transition: all 0.5s ease-in-out;\n}\n\n.button .bloom-container .button-container-main .button-inner {\n height: 60px;\n aspect-ratio: 1;\n border-radius: 50%;\n position: relative;\n box-shadow: rgba(100, 100, 111, 0.5) -10px 5px 10px 0px;\n transition: all 0.5s ease-in-out;\n}\n\n.button .bloom-container .button-container-main .button-inner .back {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: linear-gradient(60deg, rgb(1, 85, 103) 0%, rgb(147, 245, 255) 100%);\n}\n\n.button .bloom-container .button-container-main .button-inner .front {\n position: absolute;\n inset: 5px;\n border-radius: 50%;\n background: linear-gradient(60deg, rgb(0, 103, 140) 0%, rgb(58, 209, 233) 100%);\n display: grid;\n place-content: center;\n}\n\n.button .bloom-container .button-container-main .button-inner .front .svg {\n fill: #ffffff;\n opacity: 0.5;\n width: 30px;\n aspect-ratio: 1;\n transform: rotate(45deg);\n transition: all 0.2s ease-in;\n}\n\n.button .bloom-container .button-container-main .button-glass {\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.888) 100%);\n transform: translate(0%, -50%) rotate(0deg);\n transform-origin: bottom center;\n transition: all 0.5s ease-in-out;\n}\n\n.button .bloom-container .bloom {\n height: 1px;\n width: 1px;\n position: absolute;\n background: white;\n}\n\n.button .bloom-container .bloom1 {\n top: 10px;\n right: 20px;\n box-shadow: rgb(255, 255, 255) 0px 0px 10px 10px, rgb(255, 255, 255) 0px 0px 20px 20px;\n}\n\n.button .bloom-container .bloom2 {\n bottom: 10px;\n left: 20px;\n box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px 10px, rgba(255, 255, 255, 0.5) 0px 0px 30px 20px;\n}\n\n.button .bloom-container:hover {\n transform: scale(1.1);\n}\n\n.button .bloom-container:hover .button-container-main .button-glass {\n transform: translate(0%, -40%);\n}\n\n.button .bloom-container:hover .button-container-main .button-inner .front .svg {\n opacity: 1;\n filter: drop-shadow(0 0 10px white);\n}\n\n.button .bloom-container:active {\n transform: scale(0.7);\n}\n\n.button .bloom-container:active .button-container-main .button-inner {\n transform: scale(1.2);\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"f7ba0c","snapshot":"https://s1.qingting.work/runjs/b1966d23f256.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Zena4L","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":669,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Click Me","css":".btn:link,\n.btn:visited {\n text-transform: uppercase;\n text-decoration: none;\n color: rgb(27, 27, 27);\n padding: 10px 30px;\n border: 1px solid;\n border-radius: 1000px;\n display: inline-block;\n transition: all .2s;\n position: relative;\n}\n\n.btn:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(27, 27, 27, .5);\n}\n\n.btn:active {\n transform: translateY(-3px);\n}\n\n.btn::after {\n content: \"\";\n display: inline-block;\n height: 100%;\n width: 100%;\n border-radius: 100px;\n top: 0;\n left: 0;\n position: absolute;\n z-index: -1;\n transition: all .3s;\n}\n\n.btn:hover::after {\n background-color: rgb(0, 238, 255);\n transform: scaleX(1.4) scaleY(1.5);\n opacity: 0;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"5e74bc","snapshot":"https://s1.qingting.work/runjs/39499666573e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Yaya12085","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1061,"cssLen":2778,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: space-between;\n background-color: #000;\n color: #fff;\n font-size: 13px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n height: 65px;\n padding: 12px;\n border-radius: 15px 15px 12px 12px;\n cursor: pointer;\n position: relative;\n will-change: transform;\n transition: all .1s ease-in-out 0s;\n user-select: none;\n /* Add gradient shading to each side */\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n}\n\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5));\n z-index: -1;\n border-radius: 15px;\n box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),\n inset 4px -8px 0px rgba(0, 0, 0, 0.3);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.button:active {\n will-change: transform;\n transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96);\n height: 64px;\n border: 0.25px solid rgba(0, 0, 0, 0.2);\n box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),\n inset -4px -6px 0px rgba(0, 0, 0, 0.8),\n 0px 1px 0px rgba(0, 0, 0, 0.9),\n 0px 1px 0px rgba(255, 255, 255, 0.2);\n transition: all .1s ease-in-out 0s;\n}\n\n.button::after:active {\n background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));\n}\n\n.button:active::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 5%;\n left: 20%;\n width: 50%;\n height: 80%;\n background-color: rgba(255, 255, 255, 0.1);\n animation: overlay 0.1s ease-in-out 0s;\n pointer-events: none;\n}\n\n.button svg {\n width: 15px;\n height: 15px;\n}\n\n@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.button:focus {\n outline: none;\n}"},{"created":"2024-01-22T16:59:12.000Z","isPrivate":0,"projectId":"9ac05b","snapshot":"https://s1.qingting.work/runjs/9bf092a8161c.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Jules-gitclerc","updated":"2024-01-22T18:59:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1666,"cssLen":3666,"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 Button\n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.left-0{left:0px}.right-0{right:0px}.flex{display:flex}.inline-flex{display:inline-flex}.h-1{height:0.25rem}.h-40{height:10rem}.h-5{height:1.25rem}.w-5{width:1.25rem}.w-full{width:100%}.-translate-x-12{--tw-translate-x:-3rem;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))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pl-2{padding-left:0.5rem}.pl-2\\.5{padding-left:0.625rem}.pl-4{padding-left:1rem}.pr-12{padding-right:3rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.font-semibold{font-weight:600}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:pl-10:hover{padding-left:2.5rem}.hover\\:pr-6:hover{padding-right:1.5rem}.group:hover .group-hover\\:h-full{height:100%}.group:hover .group-hover\\:translate-x-0{--tw-translate-x:0px;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))}.group:hover .group-hover\\:translate-x-12{--tw-translate-x:3rem;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))}.group:hover .group-hover\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (prefers-color-scheme: dark){.dark\\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.dark\\:hover\\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.group:hover .dark\\:group-hover\\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"97f00f","snapshot":"https://s1.qingting.work/runjs/799ec15a4e41.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by aasisodiya","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":441,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #eee;\n border: none;\n padding: 1rem;\n font-size: 1rem;\n width: 10em;\n border-radius: 1rem;\n color: lightcoral;\n box-shadow: 0 0.4rem #dfd9d9;\n cursor: pointer;\n}\n\nbutton:active {\n color: white;\n box-shadow: 0 0.2rem #dfd9d9;\n transform: translateY(0.2rem);\n}\n\nbutton:hover:not(:disabled) {\n background: lightcoral;\n color: white;\n text-shadow: 0 0.1rem #bcb4b4;\n}\n\nbutton:disabled {\n cursor: auto;\n color: grey;\n}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"f8210a","snapshot":"https://s1.qingting.work/runjs/9a3c81783574.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by bandirevanth","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":49,"cssLen":676,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".custom-btn {\n width: 130px;\n height: 40px;\n color: #fff;\n border-radius: 5px;\n padding: 10px 25px;\n font-family: 'Lato', sans-serif;\n font-weight: 500;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n display: inline-block;\n box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),\n 7px 7px 20px 0px rgba(0,0,0,.1),\n 4px 4px 5px 0px rgba(0,0,0,.1);\n outline: none;\n}\n\n.btn-1 {\n background: rgb(6,14,131);\n background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);\n border: none;\n}\n\n.btn-1:hover {\n background: rgb(0,3,255);\n background: linear-gradient(0deg, rgb(0, 17, 255) 0%, rgba(2,126,251,1) 100%);\n}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"abac56","snapshot":"https://s1.qingting.work/runjs/8faf31a855e5.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T18:59:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":172,"cssLen":864,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".button {\n display: flex;\n}\n\n.box {\n width: 35px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 15px;\n font-weight: 700;\n color: #fff;\n transition: all .8s;\n cursor: pointer;\n position: relative;\n background: rgb(58, 165, 253);\n overflow: hidden;\n}\n\n.box:before {\n content: \"W\";\n position: absolute;\n top: 0;\n background: #0f0f0f;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: translateY(100%);\n transition: transform .4s;\n}\n\n.box:nth-child(2)::before {\n transform: translateY(-100%);\n content: 'O';\n}\n\n.box:nth-child(3)::before {\n content: 'R';\n}\n\n.box:nth-child(4)::before {\n transform: translateY(-100%);\n content: 'L';\n}\n\n.box:nth-child(5)::before {\n content: 'D';\n}\n\n.button:hover .box:before {\n transform: translateY(0);\n}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"b2ebf5","snapshot":"https://s1.qingting.work/runjs/5503c84d2ef6.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by cssbuttons-io","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":125,"cssLen":1529,"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 border: none;\n background: transparent;\n padding: 0;\n cursor: pointer;\n outline-offset: 4px;\n transition: filter 250ms;\n user-select: none;\n touch-action: manipulation;\n}\n\n.shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: hsl(0deg 0% 0% / 0.25);\n will-change: transform;\n transform: translateY(2px);\n transition: transform\n 600ms\n cubic-bezier(.3, .7, .4, 1);\n}\n\n.edge {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: linear-gradient(\n to left,\n hsl(340deg 100% 16%) 0%,\n hsl(340deg 100% 32%) 8%,\n hsl(340deg 100% 32%) 92%,\n hsl(340deg 100% 16%) 100%\n );\n}\n\n.front {\n display: block;\n position: relative;\n padding: 12px 27px;\n border-radius: 12px;\n font-size: 1.1rem;\n color: white;\n background: hsl(345deg 100% 47%);\n will-change: transform;\n transform: translateY(-4px);\n transition: transform\n 600ms\n cubic-bezier(.3, .7, .4, 1);\n}\n\nbutton:hover {\n filter: brightness(110%);\n}\n\nbutton:hover .front {\n transform: translateY(-6px);\n transition: transform\n 250ms\n cubic-bezier(.3, .7, .4, 1.5);\n}\n\nbutton:active .front {\n transform: translateY(-2px);\n transition: transform 34ms;\n}\n\nbutton:hover .shadow {\n transform: translateY(4px);\n transition: transform\n 250ms\n cubic-bezier(.3, .7, .4, 1.5);\n}\n\nbutton:active .shadow {\n transform: translateY(1px);\n transition: transform 34ms;\n}\n\nbutton:focus:not(:focus-visible) {\n outline: none;\n}"},{"created":"2024-01-22T16:59:11.000Z","isPrivate":0,"projectId":"0424dd","snapshot":"https://s1.qingting.work/runjs/c4eb41ae18ca.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T18:59:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":993,"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 width: 120px;\n height: 40px;\n background-color: #000;\n display: flex;\n align-items: center;\n color: white;\n flex-direction: column;\n justify-content: center;\n border: none;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.button::before {\n content: '';\n position: absolute;\n inset: 0;\n left: -4px;\n top: -1px;\n margin: auto;\n width: 128px;\n height: 48px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.button::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.button:hover::after {\n filter: blur(30px);\n}\n\n.button:hover::before {\n transform: rotate(-180deg);\n}\n\n.button:active::before {\n scale: 0.7;\n}\n\n"}]}},"actionData":null,"errors":null}