{"loaderData":{"0":null,"0-3":{"total":7434,"projects":[{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"9d63df","snapshot":null,"tags":null,"title":"button by AKAspidey01","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":464,"cssLen":764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".first-button {\n background: rgb(115, 15, 209);\n color: #fff;\n border: none;\n font-weight: 700;\n font-size: 1em;\n min-height: 60px;\n width: 200px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.6s;\n}\n\n.main-section {\n display: flex;\n flex-direction: column;\n height: 60px;\n overflow: hidden;\n align-items: flex-start;\n}\n\n.main-section:hover .second-button , .main-section:hover .first-button {\n transform: translateY(-60px);\n}\n\n.second-button {\n background: rgb(209, 15, 57);\n color: #fff;\n border: none;\n font-weight: 700;\n font-size: 1em;\n min-height: 60px;\n width: 200px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.6s;\n}\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"693e7a","snapshot":null,"tags":null,"title":"button by arshshaikh06","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2840,"cssLen":1163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

","css":"#button-container {\n position: relative;\n}\n\n.button {\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% 50%;\n background: #F4F7F5;\n border: none;\n border-radius: 25px;\n height: 50px;\n width: 50px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s ease-in;\n}\n\n#share {\n color: #DC0654;\n background: #fbe6ed;\n}\n\n#facebook {\n background: linear-gradient(-160deg, #00D2FF, #3A7BD5);\n}\n\n#instagram {\n background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);\n}\n\n#dribbble {\n background: linear-gradient(-70deg, #D70652, #FF025E);\n}\n\n#github {\n background: linear-gradient(-70deg, #171515, #FF025E);\n}\n\n#youtube {\n background: #FF0000;\n}\n\n#button-container:hover button {\n rotate: 360deg;\n}\n\n#button-container:hover #share {\n rotate: 270deg;\n}\n\n#button-container:hover > #facebook {\n translate: -300% 50%;\n}\n\n#button-container:hover > #instagram {\n translate: -226.78% -126.78%;\n}\n\n#button-container:hover > #dribbble {\n translate: -50% -200%;\n}\n\n#button-container:hover > #github {\n translate: 126.78% -126.78%;\n}\n\n#button-container:hover > #youtube {\n translate: 200% 50%;\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"af6ed6","snapshot":null,"tags":null,"title":"button by Philibert-JF","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":225,"cssLen":4044,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n ENTRY\n

\n\n","css":".type--A {\n --line_color: #555555;\n --back_color: #ffecf6;\n}\n\n.button {\n position: relative;\n z-index: 0;\n width: 240px;\n height: 56px;\n text-decoration: none;\n font-size: 14px;\n font-weight: bold;\n color: var(--line_color);\n letter-spacing: 2px;\n transition: all 0.3s ease;\n}\n.button:not(:last-child) {\n margin-bottom: 64px;\n}\n.button__text {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.button::before,\n.button::after,\n.button__text::before,\n.button__text::after {\n content: \"\";\n position: absolute;\n height: 3px;\n border-radius: 2px;\n background: var(--line_color);\n transition: all 0.5s ease;\n}\n.button::before {\n top: 0;\n left: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n.button::after {\n top: 0;\n right: 54px;\n width: 8px;\n}\n.button__text::before {\n bottom: 0;\n right: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n.button__text::after {\n bottom: 0;\n left: 54px;\n width: 8px;\n}\n.button__line {\n position: absolute;\n top: 0;\n width: 56px;\n height: 100%;\n overflow: hidden;\n}\n.button__line::before {\n content: \"\";\n position: absolute;\n top: 0;\n width: 150%;\n height: 100%;\n box-sizing: border-box;\n border-radius: 300px;\n border: solid 3px var(--line_color);\n}\n.button__line:nth-child(1),\n.button__line:nth-child(1)::before {\n left: 0;\n}\n.button__line:nth-child(2),\n.button__line:nth-child(2)::before {\n right: 0;\n}\n.button:hover {\n letter-spacing: 6px;\n}\n.button:hover::before,\n.button:hover .button__text::before {\n width: 8px;\n}\n.button:hover::after,\n.button:hover .button__text::after {\n width: calc(100% - 56px * 2 - 16px);\n}\n.button__drow1,\n.button__drow2 {\n position: absolute;\n z-index: -1;\n border-radius: 16px;\n transform-origin: 16px 16px;\n}\n.button__drow1 {\n top: -16px;\n left: 40px;\n width: 32px;\n height: 0;\n transform: rotate(30deg);\n}\n.button__drow2 {\n top: 44px;\n left: 77px;\n width: 32px;\n height: 0;\n transform: rotate(-127deg);\n}\n.button__drow1::before,\n.button__drow1::after,\n.button__drow2::before,\n.button__drow2::after {\n content: \"\";\n position: absolute;\n}\n.button__drow1::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-60deg);\n}\n.button__drow1::after {\n top: -10px;\n left: 45px;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(69deg);\n}\n.button__drow2::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-146deg);\n}\n.button__drow2::after {\n bottom: 26px;\n left: -40px;\n width: 0;\n height: 32px;\n border-radius: 16px;\n transform-origin: 16px 16px;\n transform: rotate(-262deg);\n}\n.button__drow1,\n.button__drow1::before,\n.button__drow1::after,\n.button__drow2,\n.button__drow2::before,\n.button__drow2::after {\n background: var(--back_color);\n}\n.button:hover .button__drow1 {\n animation: drow1 ease-in 0.06s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow1::before {\n animation: drow2 linear 0.08s 0.06s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow1::after {\n animation: drow3 linear 0.03s 0.14s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2 {\n animation: drow4 linear 0.06s 0.2s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2::before {\n animation: drow3 linear 0.03s 0.26s;\n animation-fill-mode: forwards;\n}\n.button:hover .button__drow2::after {\n animation: drow5 linear 0.06s 0.32s;\n animation-fill-mode: forwards;\n}\n@keyframes drow1 {\n 0% {\n height: 0;\n }\n 100% {\n height: 100px;\n }\n}\n@keyframes drow2 {\n 0% {\n width: 0;\n opacity: 0;\n }\n 10% {\n opacity: 0;\n }\n 11% {\n opacity: 1;\n }\n 100% {\n width: 120px;\n }\n}\n@keyframes drow3 {\n 0% {\n width: 0;\n }\n 100% {\n width: 80px;\n }\n}\n@keyframes drow4 {\n 0% {\n height: 0;\n }\n 100% {\n height: 120px;\n }\n}\n@keyframes drow5 {\n 0% {\n width: 0;\n }\n 100% {\n width: 124px;\n }\n}\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"62db56","snapshot":null,"tags":null,"title":"button by SelfMadeSystem","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":678,"cssLen":1557,"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 \n \n \n

\n","css":".button {\n --background: #fefbff;\n --inner-shadow: #9faef9;\n --inner-outline: #34217d;\n --inner-outline-bottom: #fafcfe;\n --inner-outline-middle: #8880d5;\n --inner-outline-outer-top: #fefcff;\n --inner-outline-outer-bottom-1: #29107b;\n --inner-outline-outer-bottom-2: #5b42c4;\n --inner-outline-outer-bottom-3: #200265;\n --line-1: #8676c9;\n --line-2: #5c69ca;\n display: flex;\n gap: 0.4em;\n align-items: center;\n padding: 0.6em 0.8em;\n transition: all 0.3s;\n background: var(--background);\n border-radius: 0.7em;\n\n box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),\n 0px 2px 0px 0px var(--inner-outline-bottom),\n 0px -2px 0px 0px var(--inner-outline),\n -2px -2px 0px 0px var(--inner-outline),\n 2px -2px 0px 0px var(--inner-outline),\n 0px 0px 0px 6px var(--inner-outline-middle),\n 0px -2px 0px 7px var(--inner-outline-outer-top),\n 0px 4px 0px 7px var(--inner-outline-outer-bottom-1),\n 0px 7px 0px 7px var(--inner-outline-outer-bottom-2),\n 0px 10px 0px 7px var(--inner-outline-outer-bottom-3);\n}\n\n.button-icon {\n display: inline-block;\n vertical-align: top;\n width: 1.5em;\n}\n\n.button-icon path {\n stroke-width: 2px;\n stroke: var(--inner-outline);\n stroke-linejoin: round;\n}\n\n.button-lines {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n\n.button-line-1 {\n height: 0.2em;\n width: 4em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-1);\n}\n\n.button-line-2 {\n height: 0.2em;\n width: 3em;\n border-radius: 10em;\n display: inline-block;\n background: var(--line-2);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"cd343c","snapshot":null,"tags":null,"title":"button by carlosepcc","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":352,"cssLen":2332,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer{cursor:pointer}.rounded-lg{border-radius:0.5rem}.border-b-\\[4px\\]{border-bottom-width:4px}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128 / var(--tw-border-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-green-300{--tw-shadow-color:#86efac;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:-translate-y-\\[1px\\]:hover{--tw-translate-y:-1px;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))}.hover\\:border-b-\\[6px\\]:hover{border-bottom-width:6px}.hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:shadow-green-300:hover{--tw-shadow-color:#86efac;--tw-shadow:var(--tw-shadow-colored)}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);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)}.active\\:translate-y-\\[2px\\]:active{--tw-translate-y:2px;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))}.active\\:border-b-\\[2px\\]:active{border-bottom-width:2px}.active\\:shadow-none:active{--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)}.active\\:brightness-90:active{--tw-brightness:brightness(.9);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)}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"f47e42","snapshot":null,"tags":null,"title":"button by KhaledMatalkah","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1469,"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: #3dda5f;\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(64, 255, 105, 0.247);\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: #17772f;\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: #1c8f3e;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n transform: translateY(2px);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"c3e9ab","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":144,"cssLen":536,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n height: 45px;\n width: 45px;\n border: none;\n border-radius: 10px;\n background-color: black;\n cursor: pointer;\n transition: all 0.3s;\n overflow: hidden;\n}\n.bracket {\n font-size: 18px;\n transition: all 0.3s;\n color: rgb(182, 104, 255);\n}\n.text {\n font-size: 15px;\n width: 0;\n transform: scale(0);\n transition: all 0.3s;\n color: white;\n}\n.button:hover {\n width: 100px;\n}\n.button:hover .text {\n transform: scale(1);\n width: 40px;\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"560e9e","snapshot":null,"tags":null,"title":"button by Sujanthapast0","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":729,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n width: 90px;\n height: 40px;\n position: relative;\n font-family: var(--font);\n color: #3b82f6;\n font-weight: 600;\n background-color: #fff;\n border: none;\n overflow: hidden;\n border-radius: 5px;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;\n transition: all ease 100ms;\n}\n\nbutton:hover {\n background-color: #cbdcf8;\n}\n\nbutton:focus {\n background-color: #cbdcf8;\n}\n\nbutton::before {\n content: 'done✅';\n position: absolute;\n color: #3b82f6;\n left: 0;\n top: -14px;\n right: 0;\n transition: all ease 300ms;\n opacity: 0%;\n}\n\nbutton:focus::before {\n opacity: 100%;\n transform: translatey(26px);\n}\n\n.submit {\n transition: all ease 100ms;\n opacity: 100%;\n}\n\nbutton:focus > .submit {\n opacity: 0%;\n}\n\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"a67ef9","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":797,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 18px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: inline-block;\n text-align: center;\n font-weight: bold;\n padding: 0.7em 2em;\n border: 3px solid black;\n border-radius: 2px;\n position: relative;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);\n color: black;\n text-decoration: none;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\nbutton:before {\n transition: 0.5s all ease;\n position: absolute;\n top: 0;\n left: 50%;\n right: 50%;\n bottom: 0;\n opacity: 0;\n content: '';\n background-color: black;\n z-index: -1;\n}\n\nbutton:hover, button:focus {\n color: white;\n}\n\nbutton:hover:before, button:focus:before {\n transition: 0.5s all ease;\n left: 0;\n right: 0;\n opacity: 1;\n}\n\nbutton:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"479985","snapshot":null,"tags":null,"title":"button by Web-Potato","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":816,"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 height: 50px;\n width: 150px;\n color: #FFF;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 2px;\n background-color: #212121;\n transition: all 0.5s;\n border: none;\n}\n\nbutton::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(29, 255, 86, 0.281);\n border-radius: 5px;\n transition: all 0.3s;\n z-index: 1;\n}\n\nbutton:hover::before {\n opacity: 0;\n transform: scale(0.7,0.7);\n}\n\nbutton::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: all 0.4s;\n border: 1px solid rgba(29, 255, 86, 0.281);\n border-radius: 5px;\n transform: scale(1.5,1.5);\n opacity: 0;\n z-index: 1;\n}\n\nbutton:hover::after {\n opacity: 1;\n transform: scale(1,1);\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"ec1b09","snapshot":null,"tags":null,"title":"button by barisdogansutcu","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1069,"cssLen":1366,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".download-button {\n position: relative;\n border-width: 0;\n color: rgb(19, 19, 19);\n font-size: 15px;\n font-weight: 600;\n border-radius: 4px;\n z-index: 1;\n}\n\n.download-button .docs {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n min-height: 40px;\n padding: 0 10px;\n border-radius: 4px;\n z-index: 1;\n background-color: #ffffff;\n border: solid 1px #e8e8e82d;\n transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.download-button:hover {\n box-shadow: rgba(233, 233, 233, 0.555) 0px 54px 55px,\n rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,\n rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;\n}\n\n.download {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 90%;\n margin: 0 auto;\n z-index: -1;\n border-radius: 0px 0px 4px 4px;\n transform: translateY(0%);\n background-color: #01e056;\n border: solid 1px #01e0572d;\n transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n cursor: pointer;\n}\n\n.download-button:hover .download {\n transform: translateY(100%);\n}\n\n.download svg polyline,\n.download svg line {\n animation: docs 1s infinite;\n}\n\n@keyframes docs {\n 0% {\n transform: translateY(0%);\n }\n\n 50% {\n transform: translateY(-15%);\n }\n\n 100% {\n transform: translateY(0%);\n }\n}\n"},{"created":"2024-01-22T17:00:18.000Z","isPrivate":0,"projectId":"c6c80a","snapshot":null,"tags":null,"title":"button by EcheverriaJesus","updated":"2024-01-22T17:00:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":703,"cssLen":2473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.w-28 {\n width: 7rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-\\[\\#14b8a6\\] {\n --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-\\[\\#059669\\] {\n --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #059669 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-\\[\\#047857\\] {\n --tw-gradient-to: #047857 var(--tw-gradient-to-position);\n}\n.fill-white {\n fill: #fff;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.duration-300 {\n transition-duration: 300ms;\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))\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\\:from-\\[\\#047857\\]:hover {\n --tw-gradient-from: #047857 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-\\[\\#14b8a6\\]:hover {\n --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);\n}\n.hover\\:shadow-xl:hover {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.hover\\:shadow-green-500:hover {\n --tw-shadow-color: #22c55e;\n --tw-shadow: var(--tw-shadow-colored);\n}\n"}]}},"actionData":null,"errors":null}