{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"f8517b","snapshot":null,"tags":null,"title":"button by sunnyshaikh","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":275,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n padding: 15px 40px;\n background: linear-gradient(145deg, lightblue, blue);\n font-size: 1rem;\n border: 0;\n border-radius: 30px;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0,0,0,.5);\n box-shadow: inset 0 -2px 10px rgba(0,0,0,.3),\n 0 2px 5px rgba(0,0,0,.3);\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"f9d7c6","snapshot":null,"tags":null,"title":"button by reshades","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":467,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n background-color: #ffffff00;\n color: #fff;\n width: 8.5em;\n height: 2.9em;\n border: #ffffff 0.2em solid;\n border-radius: 11px;\n text-align: right;\n transition: all 0.6s ease;\n}\n\n.button:hover {\n background-color: #ffffff;\n color: #000\n}\n\n.button svg {\n width: 1.6em;\n margin: -0.2em 0.8em 1em;\n position: absolute;\n display: flex;\n transition: all 0.6s ease;\n}\n\n.button:hover svg {\n transform: translateX(5px);\n}\n\n.text {\n margin: 0 1.5em\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"92565f","snapshot":null,"tags":null,"title":"button by catraco","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":465,"cssLen":1973,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-top-\\[150\\%\\] {\n top: -150%\n}\n\n.left-0 {\n left: 0px\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-\\[5px\\] {\n height: 5px\n}\n\n.w-80 {\n width: 20rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b-4 {\n border-bottom-width: 4px\n}\n\n.border-slate-400 {\n --tw-border-opacity: 1;\n border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n\n.bg-slate-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(148 163 184 / var(--tw-bg-opacity))\n}\n\n.bg-slate-950 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 6 23 / var(--tw-bg-opacity))\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow-\\[0_0_10px_10px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.3\\)\\] {\n --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);\n --tw-shadow-colored: 0 0 10px 10px 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.shadow-slate-400 {\n --tw-shadow-color: #94a3b8;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:border-b:hover {\n border-bottom-width: 1px\n}\n\n.hover\\:border-t-4:hover {\n border-top-width: 4px\n}\n\n.hover\\:brightness-150:hover {\n --tw-brightness: brightness(1.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.active\\:opacity-75:active {\n opacity: 0.75\n}\n\n.group:hover .group-hover\\:top-\\[150\\%\\] {\n top: 150%\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"53d1ee","snapshot":null,"tags":null,"title":"button by santhoshsj-dev","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":619,"cssLen":7842,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".button {\n display: flex;\n position: relative;\n width: 200px;\n height: 60px;\n text-decoration: none;\n perspective: 600px;\n background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a);\n box-shadow: 0 0 32px #000000;\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n}\n\n.button::before {\n top: 0;\n transform-origin: top center;\n transform: rotateX(70deg);\n background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%);\n}\n\n.button::after {\n bottom: 0;\n transform-origin: bottom center;\n transform: rotateX(-110deg);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n transform: translate3d(0, 27px, 74px);\n perspective: 600px;\n}\n\n.button__text {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n font-size: 32px;\n font-weight: 900;\n color: #ffffff33;\n transition: all ease-in-out 1s;\n}\n\n.button__text::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 200px;\n height: 60px;\n background: linear-gradient(25deg, #ffffff1a, #ffffff00);\n clip-path: path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z');\n}\n\n.button__text::after {\n content: '';\n position: absolute;\n z-index: 2;\n top: 4px;\n left: 4px;\n width: 272px;\n height: 40px;\n background: linear-gradient(25deg, #ffffff4d, #ffffff00);\n clip-path: path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z');\n}\n\n.button__wrapper::before,\n.button__wrapper::after {\n content: '';\n position: absolute;\n top: 0;\n width: 84px;\n height: 100%;\n background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper::before {\n left: 0;\n transform-origin: left center;\n transform: rotateY(90deg) skewY(-20deg);\n}\n\n.button__wrapper::after {\n right: 0;\n transform-origin: right center;\n transform: rotateY(-90deg) skewY(20deg);\n}\n\n.button__box {\n position: absolute;\n top: 0;\n left: 8px;\n bottom: 0;\n margin: auto 0;\n width: 180px;\n height: 49px;\n transform: translate3d(0, 4px, 10px);\n perspective: 600px;\n}\n\n.inner {\n transition: all ease-in-out 1s;\n}\n\n.inner__back {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: #64646433;\n perspective: 600px;\n}\n\n.inner__top {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: rotateX(70deg);\n background: #646464cc;\n}\n\n.inner__front {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: translate3d(0, 24px, 68px);\n background: #646464cc;\n}\n\n.inner__bottom {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: bottom left;\n transform: rotateX(-110deg);\n background: #64646433;\n}\n\n.inner__left {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n transition: all linear .01s;\n}\n\n.inner__right {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n}\n\n.button:hover .inner__top,\n.button:hover .inner__front,\n.button:hover .inner__bottom,\n.button:hover .inner__back {\n width: 100%;\n}\n\n.button:hover .inner__left {\n background: #64646480;\n}\n\n.button:hover .inner__right {\n left: 100%;\n background: #64646480;\n}\n\n.button:hover .button__text {\n color: #ffffff;\n}\n\n.plate {\n position: absolute;\n z-index: 10;\n top: 0;\n left: -20px;\n width: 320px;\n height: 120px;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.plate:nth-child(1) {\n animation-name: plate_1;\n}\n\n.plate:nth-child(2) {\n animation-name: plate_2;\n}\n\n.plate:nth-child(3) {\n animation-name: plate_3;\n}\n\n.plate:nth-child(4) {\n animation-name: plate_4;\n}\n\n.plate:nth-child(5) {\n animation-name: plate_5;\n}\n\n.button:hover .plate {\n animation-play-state: paused;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__top,\n.plate:nth-child(1):hover~.button__box .inner__front {\n background: #d8003ccc;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__left,\n.plate:nth-child(1):hover~.button__box .inner__right {\n background: #d8003c80;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__back,\n.plate:nth-child(1):hover~.button__box .inner__bottom {\n background: #d8003c33;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__top,\n.plate:nth-child(2):hover~.button__box .inner__front {\n background: #0064becc;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__left,\n.plate:nth-child(2):hover~.button__box .inner__right {\n background: #0064be80;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__back,\n.plate:nth-child(2):hover~.button__box .inner__bottom {\n background: #0064be33;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__top,\n.plate:nth-child(3):hover~.button__box .inner__front {\n background: #00aa64cc;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__left,\n.plate:nth-child(3):hover~.button__box .inner__right {\n background: #00aa6480;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__back,\n.plate:nth-child(3):hover~.button__box .inner__bottom {\n background: #00aa6433;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__top,\n.plate:nth-child(4):hover~.button__box .inner__front {\n background: #ffe614cc;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__left,\n.plate:nth-child(4):hover~.button__box .inner__right {\n background: #ffe61480;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__back,\n.plate:nth-child(4):hover~.button__box .inner__bottom {\n background: #ffe61433;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__top,\n.plate:nth-child(5):hover~.button__box .inner__front {\n background: #9b32ffcc;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__left,\n.plate:nth-child(5):hover~.button__box .inner__right {\n background: #9b32ff80;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__back,\n.plate:nth-child(5):hover~.button__box .inner__bottom {\n background: #9b32ff33;\n}\n\n@keyframes plate_1 {\n 0% {\n transform: scale(1);\n }\n\n 19.9% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_2 {\n 0% {\n transform: scale(0);\n }\n\n 19.9% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1);\n }\n\n 39.9% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_3 {\n 0% {\n transform: scale(0);\n }\n\n 39.9% {\n transform: scale(0);\n }\n\n 40% {\n transform: scale(1);\n }\n\n 59.9% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_4 {\n 0% {\n transform: scale(0);\n }\n\n 59.9% {\n transform: scale(0);\n }\n\n 60% {\n transform: scale(1);\n }\n\n 79.9% {\n transform: scale(1);\n }\n\n 80% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_5 {\n 0% {\n transform: scale(0);\n }\n\n 79.9% {\n transform: scale(0);\n }\n\n 80% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #212121;\n padding: 50px 50px 80px 50px;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"4fd74d","snapshot":null,"tags":null,"title":"button by Yaseen549","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":254,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n color: #8707ff;\n border: 2px solid #8707ff;\n border-radius: 10px;\n padding: 10px 25px;\n background: transparent;\n}\n\n.button:hover {\n box-shadow: 2px 2px 15px #8707ff inset;\n}\n\n.button:active {\n box-shadow: 2px 2px 20px #8707ff inset;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"f34147","snapshot":null,"tags":null,"title":"button by MINOTAURO18","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4060,"cssLen":570,"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

","css":".redes {\n width: 80px;\n height: auto;\n display: flex;\n flex-direction: column;\n}\n\n.redes a {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 40px;\n transition: all 0.3s ease-in-out;\n}\n\n.redes a svg {\n width: 30px;\n fill: #ffffff;\n}\n\n.redes .discord {\n background-color: rgb(0, 60, 255);\n}\n\n.redes .github {\n background-color: rgb(24, 22, 22);\n}\n\n.redes .twitter {\n background-color: #33BBFF;\n}\n\n.redes .instagram {\n background: linear-gradient(45deg, #833AB4, #FD1D1D, #F56040);\n}\n\n.redes a:hover {\n width: 90px;\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"dbf493","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);\n border: none;\n font-size: 1.2em;\n border-radius: 1.5em;\n padding: 4px;\n transition: border-top-left-radius 0.2s ease-in, \n border-top-right-radius 0.2s ease-in 0.15s, \n border-bottom-right-radius 0.2s ease-in 0.3s,\n border-bottom-left-radius 0.2s ease-in 0.45s, \n padding 0.2s ease-in;\n position: relative;\n}\n\n.button__int {\n background-color: #212121;\n color: white;\n border-radius: 1.3em;\n padding: 10px 40px;\n transition: all 0.2s ease-in,\n border-top-left-radius 0.2s ease-in, \n border-top-right-radius 0.2s ease-in 0.15s, \n border-bottom-right-radius 0.2s ease-in 0.3s,\n border-bottom-left-radius 0.2s ease-in 0.45s,\n padding 0.2s ease-in;\n font-weight: 600;\n z-index: -1;\n box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),\n 15px -10px 30px -5px rgba(255, 0, 212, 0.8),\n 15px 10px 30px -5px rgba(255, 174, 0, 0.8),\n -15px 10px 30px -5px rgba(255, 230, 0.8);\n}\n\n.button:active .button__int {\n padding: 10px 30px;\n}\n\n.button:hover {\n border-radius: 0;\n}\n\n.button:hover .button__int {\n border-radius: 0;\n}\n\n.button:hover .button__int {\n box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),\n 25px -10px 30px -5px rgba(255, 0, 212, 0.7),\n 25px 10px 30px -5px rgba(255, 174, 0, 0.7),\n -25px 10px 30px -5px rgba(255, 230, 0, 0.7);\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"ba4a01","snapshot":null,"tags":null,"title":"button by pamtbi","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1340,"cssLen":1355,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".button {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-template-rows: repeat(4, 1fr);\n width: 70px;\n aspect-ratio: 3 / 2;\n border: none;\n border-radius: 0px;\n margin: 0 auto;\n padding: 0;\n box-shadow: 0px 5px 0px 0px rgb(102,102,102);\n transition: all .15s;\n position: relative;\n padding: 0\n}\n\n.button:hover {\n transform: translateY(-1px);\n}\n\n.button:active {\n box-shadow: none;\n transform: translateY(5px);\n}\n\n.button__bg {\n height: 100%;\n aspect-ratio: 1 / 1;\n align-self: stretch;\n}\n\n.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 {\n background: #494949;\n}\n\n.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 {\n background: #505050;\n}\n\n.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 {\n background: #5a5a5a;\n}\n\n.button__bg-11, .button__bg-22 {\n background: #414141;\n}\n\n.button__bg-23, .button__bg-24 {\n background: #535353;\n}\n\n.span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 9px;\n width: 100%;\n color: rgb(223, 217, 189);\n display: block;\n text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"304594","snapshot":null,"tags":null,"title":"button by amerfad","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":48,"cssLen":904,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".animated-button {\n background-color: #ff6b6b;\n border: none;\n color: #ffffff;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 22px;\n margin: 4px 2px;\n cursor: pointer;\n font-family: 'Montserrat', sans-serif;\n letter-spacing: 2px;\n border-radius: 50px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.animated-button:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background-color: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n opacity: 0;\n transform: translate(-50%, -50%);\n transition: all 0.5s ease;\n}\n\n.animated-button:hover:after {\n width: 210px;\n height: 200px;\n opacity: 1;\n}\n\n.animated-button:focus {\n outline: none;\n}\n\n.animated-button:active {\n transform: translateY(2px);\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"ab08e9","snapshot":null,"tags":null,"title":"button by omriluz","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":950,"cssLen":2674,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","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(-20deg);\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(\n 60deg,\n rgb(245, 255, 255) 0%,\n rgb(185, 225, 200) 100%\n );\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, 0, 0));\n display: grid;\n place-content: center;\n transform: rotate(20deg);\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 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(\n 90deg,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0.888) 100%\n );\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,\n 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,\n 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\n .bloom-container:hover\n .button-container-main\n .button-inner\n .front\n .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}\n"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"d8b4f6","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":781,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n /* Variables */\n --button_radius: 0.75em;\n --button_color: #e8e8e8;\n --button_outline_color: red;\n font-size: 17px;\n font-weight: bold;\n border: none;\n border-radius: var(--button_radius);\n background: var(--button_outline_color);\n}\n\n.button_top {\n display: block;\n box-sizing: border-box;\n border: 2px solid var(--button_outline_color);\n border-radius: var(--button_radius);\n padding: 0.75em 1.5em;\n background: var(--button_color);\n color: var(--button_outline_color);\n transform: translateY(-0.2em);\n transition: transform 0.1s ease;\n}\n\nbutton:hover .button_top {\n /* Pull the button upwards when hovered */\n transform: translateY(-0.33em);\n}\n\nbutton:active .button_top {\n /* Push the button downwards when pressed */\n transform: translateY(0);\n}"},{"created":"2024-01-22T17:00:25.000Z","isPrivate":0,"projectId":"4c8bc8","snapshot":null,"tags":null,"title":"button by prince192000","updated":"2024-01-22T17:00:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1017,"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 padding: 15px 30px;\n text-transform: uppercase;\n text-decoration: none;\n color: #fff;\n background: black;\n border: none;\n letter-spacing: 2px;\n font-size: 17px;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.226);\n z-index: -1;\n transition: transform 0.5s;\n transform-origin: bottom right;\n transform: scale(0);\n}\n\nbutton:hover:before {\n transition: transform 0.5s;\n transform-origin: top left;\n transform: scale(1);\n}\n\nbutton:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n border: 2px solid #fff;\n box-sizing: border-box;\n z-index: -1;\n transition: transform 0.5s;\n transform-origin: bottom right;\n transform: scale(1);\n}\n\nbutton:hover:after {\n transition: transform 0.5s;\n transform-origin: top left;\n transform: scale(0);\n}"}]}},"actionData":null,"errors":null}