{"loaderData":{"0":null,"0-2":{"total":7072,"projects":[{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"486505","snapshot":null,"tags":null,"title":"button by rrr63","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":46,"cssLen":328,"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: 15px 35px;\n border-radius: 5px;\n outline: 2px solid #2835ba;\n outline-offset: 0px;\n background: #2835ba;\n border: 0;\n font-weight: bolder;\n color: white;\n transition: all .1s ease-in-out;\n cursor: pointer;\n}\n\n.button:hover {\n outline-offset: 3px;\n outline: 3px solid #2835ba;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"25d0d3","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":653,"cssLen":551,"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 justify-content: center;\n align-items: center;\n padding: 10px 15px;\n gap: 15px;\n background-color: #181717;\n outline: 3px #181717 solid;\n outline-offset: -3px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: 400ms;\n}\n\n.button .text {\n color: white;\n font-weight: 700;\n font-size: 1em;\n transition: 400ms;\n}\n\n.button svg path {\n transition: 400ms;\n}\n\n.button:hover {\n background-color: transparent;\n}\n\n.button:hover .text {\n color: #181717;\n}\n\n.button:hover svg path {\n fill: #181717;\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"7bbf79","snapshot":null,"tags":null,"title":"button by emanuelesanntoss","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":727,"cssLen":4678,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".continue-application {\n --color: #fff;\n --background: #404660;\n --background-hover: #3A4059;\n --background-left: #2B3044;\n --folder: #F3E9CB;\n --folder-inner: #BEB393;\n --paper: #FFFFFF;\n --paper-lines: #BBC1E1;\n --paper-behind: #E1E6F9;\n --pencil-cap: #fff;\n --pencil-top: #275EFE;\n --pencil-middle: #fff;\n --pencil-bottom: #5C86FF;\n --shadow: rgba(13, 15, 25, .2);\n border: none;\n outline: none;\n cursor: pointer;\n position: relative;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 500;\n line-height: 19px;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n padding: 17px 29px 17px 69px;\n transition: background 0.3s;\n color: var(--color);\n background: var(--bg, var(--background));\n}\n\n.continue-application > div {\n top: 0;\n left: 0;\n bottom: 0;\n width: 53px;\n position: absolute;\n overflow: hidden;\n border-radius: 5px 0 0 5px;\n background: var(--background-left);\n}\n\n.continue-application > div .folder {\n width: 23px;\n height: 27px;\n position: absolute;\n left: 15px;\n top: 13px;\n}\n\n.continue-application > div .folder .top {\n left: 0;\n top: 0;\n z-index: 2;\n position: absolute;\n transform: translateX(var(--fx, 0));\n transition: transform 0.4s ease var(--fd, 0.3s);\n}\n\n.continue-application > div .folder .top svg {\n width: 24px;\n height: 27px;\n display: block;\n fill: var(--folder);\n transform-origin: 0 50%;\n transition: transform 0.3s ease var(--fds, 0.45s);\n transform: perspective(120px) rotateY(var(--fr, 0deg));\n}\n\n.continue-application > div .folder:before, .continue-application > div .folder:after,\n.continue-application > div .folder .paper {\n content: \"\";\n position: absolute;\n left: var(--l, 0);\n top: var(--t, 0);\n width: var(--w, 100%);\n height: var(--h, 100%);\n border-radius: 1px;\n background: var(--b, var(--folder-inner));\n}\n\n.continue-application > div .folder:before {\n box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);\n transform: translateX(var(--fx, 0));\n transition: transform 0.4s ease var(--fd, 0.3s);\n}\n\n.continue-application > div .folder:after,\n.continue-application > div .folder .paper {\n --l: 1px;\n --t: 1px;\n --w: 21px;\n --h: 25px;\n --b: var(--paper-behind);\n}\n\n.continue-application > div .folder:after {\n transform: translate(var(--pbx, 0), var(--pby, 0));\n transition: transform 0.4s ease var(--pbd, 0s);\n}\n\n.continue-application > div .folder .paper {\n z-index: 1;\n --b: var(--paper);\n}\n\n.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {\n content: \"\";\n width: var(--wp, 14px);\n height: 2px;\n border-radius: 1px;\n transform: scaleY(0.5);\n left: 3px;\n top: var(--tp, 3px);\n position: absolute;\n background: var(--paper-lines);\n box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);\n}\n\n.continue-application > div .folder .paper:after {\n --tp: 6px;\n --wp: 10px;\n}\n\n.continue-application > div .pencil {\n height: 2px;\n width: 3px;\n border-radius: 1px 1px 0 0;\n top: 8px;\n left: 105%;\n position: absolute;\n z-index: 3;\n transform-origin: 50% 19px;\n background: var(--pencil-cap);\n transform: translateX(var(--pex, 0)) rotate(35deg);\n transition: transform 0.4s ease var(--pbd, 0s);\n}\n\n.continue-application > div .pencil:before, .continue-application > div .pencil:after {\n content: \"\";\n position: absolute;\n display: block;\n background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));\n width: var(--w, 5px);\n height: var(--h, 20px);\n border-radius: var(--br, 2px 2px 0 0);\n top: var(--t, 2px);\n left: var(--l, -1px);\n}\n\n.continue-application > div .pencil:before {\n -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);\n clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);\n}\n\n.continue-application > div .pencil:after {\n --b: none;\n --w: 3px;\n --h: 6px;\n --br: 0 2px 1px 0;\n --t: 3px;\n --l: 3px;\n border-top: 1px solid var(--pencil-top);\n border-right: 1px solid var(--pencil-top);\n}\n\n.continue-application:before, .continue-application:after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 2px;\n border-radius: 1px;\n background: var(--color);\n transform-origin: 9px 1px;\n transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));\n top: 26px;\n right: 16px;\n transition: transform 0.3s;\n}\n\n.continue-application:after {\n --r: 45deg;\n}\n\n.continue-application:hover {\n --cx: 2px;\n --bg: var(--background-hover);\n --fx: -40px;\n --fr: -60deg;\n --fd: .15s;\n --fds: 0s;\n --pbx: 3px;\n --pby: -3px;\n --pbd: .15s;\n --pex: -24px;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"ed7839","snapshot":null,"tags":null,"title":"button by AnthonyPreite","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":1084,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n","css":".button {\n position: relative;\n height: 50px;\n width: 130px;\n border: none;\n outline: none;\n color: white;\n background: #0f0f0f;\n cursor: pointer;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 700;\n font-family: 'Gruppo', sans-serif;\n transition: all .2s ease-out;\n}\n\n.button:before {\n position: absolute;\n content: '';\n top: -4px;\n left: -4px;\n height: calc(100% + 8px);\n width: calc(100% + 8px);\n border-radius: 6px;\n z-index: -1;\n opacity: 1;\n background: linear-gradient(90deg, hsla(141, 54%, 86%, 1) 0%, hsla(333, 73%, 85%, 1) 25%, hsla(141, 54%, 86%, 1)50%);\n background-size: 400%;\n transition: opacity 1s ease-in-out;\n animation: animate 20s linear infinite;\n}\n\n.button:hover {\n transform: scale(1.1);\n color: #0f0f0f;\n opacity: 1;\n transition: all .3s ease-in-out;\n}\n\n.button:active {\n background: none;\n color: #000000;\n transform: scale(1);\n transition: all .3s ease-in-out;\n}\n\n@keyframes animate {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"d0f0ff","snapshot":null,"tags":null,"title":"button by Tsiangana","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6475,"cssLen":2510,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n padding: 12px 35px;\n background: #fec195;\n font-size: 17px;\n font-weight: 600;\n color: #fff;\n border: 3px solid #fec195;\n border-radius: 19px;\n box-shadow: 0 0 0 #fec1958c;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.star-1 {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);\n}\n\n.star-2 {\n position: absolute;\n top: 45%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-3 {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-4 {\n position: absolute;\n top: 20%;\n left: 40%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-5 {\n position: absolute;\n top: 25%;\n left: 45%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);\n}\n\n.star-6 {\n position: absolute;\n top: 5%;\n left: 50%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 0 #fffdef);\n z-index: -5;\n transition: all 0.8s ease;\n}\n\nbutton:hover {\n background: transparent;\n color: #fec195;\n box-shadow: 0 0 25px #fec1958c;\n}\n\nbutton:hover .star-1 {\n position: absolute;\n top: -80%;\n left: -30%;\n width: 25px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-2 {\n position: absolute;\n top: -40%;\n left: 16%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-3 {\n position: absolute;\n top: 95%;\n left: 2%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-4 {\n position: absolute;\n top: -70%;\n left: 75%;\n width: 8px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-5 {\n position: absolute;\n top: 35%;\n left: 115%;\n width: 15px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\nbutton:hover .star-6 {\n position: absolute;\n top: 75%;\n left: 60%;\n width: 5px;\n height: auto;\n filter: drop-shadow(0 0 10px #fffdef);\n z-index: 2;\n}\n\n.fil0 {\n fill: #fffdef;\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"a91831","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":1297,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n position: relative;\n overflow: hidden;\n border: 1px solid #18181a;\n color: #18181a;\n display: inline-block;\n font-size: 15px;\n line-height: 15px;\n padding: 18px 18px 17px;\n text-decoration: none;\n cursor: pointer;\n background: #fff;\n font-weight: 800;\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n}\n\nbutton span:first-child {\n position: relative;\n transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);\n z-index: 10;\n}\n\nbutton span:last-child {\n display: block;\n position: absolute;\n bottom: 0;\n transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);\n z-index: 100;\n opacity: 0;\n top: 50%;\n left: 50%;\n transform: translateY(225%) translateX(-50%);\n height: 14px;\n line-height: 13px;\n}\n\nbutton:after {\n content: \"\";\n position: absolute;\n bottom: -50%;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #91C9FF;\n transform-origin: bottom center;\n transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);\n transform: skewY(9.3deg) scaleY(0);\n z-index: 50;\n}\n\nbutton:hover:after {\n transform-origin: bottom center;\n transform: skewY(9.3deg) scaleY(2);\n}\n\nbutton:hover span:last-child {\n transform: translateX(-50%) translateY(-50%);\n opacity: 1;\n transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);\n}"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"9fd300","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":207,"cssLen":1435,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-27,\n.btn-27 *,\n.btn-27 :after,\n.btn-27 :before,\n.btn-27:after,\n.btn-27:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-27 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n font-weight: 900;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n text-transform: uppercase;\n}\n\n.btn-27:disabled {\n cursor: default;\n}\n\n.btn-27:-moz-focusring {\n outline: auto;\n}\n\n.btn-27 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-27 [hidden] {\n display: none;\n}\n\n.btn-27 {\n --tilt: 40deg;\n background: none;\n -webkit-mask-image: none;\n padding: 2rem 5rem;\n perspective: 500px;\n transform-style: preserve-3d;\n}\n\n.btn-27 .text-container {\n background: #fff;\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transform-origin: center center;\n transition: transform 0.2s;\n}\n\n.btn-27 .text {\n color: #000;\n}\n\n.btn-27:hover .text-container:first-child {\n transform: rotateY(var(--tilt));\n}\n\n.btn-27:hover .text-container:nth-child(2) {\n transform: rotateY(calc(var(--tilt) * -1));\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"a05cb9","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-56,\n.btn-56 *,\n.btn-56 :after,\n.btn-56 :before,\n.btn-56:after,\n.btn-56:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-56 {\n -webkit-tap-highlight-color: transparent;\n -webkit-appearance: button;\n background-color: #000;\n background-image: none;\n color: #fff;\n cursor: pointer;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,\n Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n font-size: 100%;\n line-height: 1.5;\n margin: 0;\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\n padding: 0;\n}\n\n.btn-56:disabled {\n cursor: default;\n}\n\n.btn-56:-moz-focusring {\n outline: auto;\n}\n\n.btn-56 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-56 [hidden] {\n display: none;\n}\n\n.btn-56 {\n border: 1px solid;\n border-radius: 999px;\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n -webkit-mask-image: none;\n overflow: hidden;\n padding: 1.2rem 3rem;\n position: relative;\n text-transform: uppercase;\n}\n\n.btn-56:hover {\n -webkit-animation: pulse 0.5s;\n animation: pulse 0.5s;\n box-shadow: 0 0 0 2em transparent;\n}\n\n@-webkit-keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 #fff;\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 #fff;\n }\n}\n"},{"created":"2024-01-22T17:00:27.000Z","isPrivate":0,"projectId":"d30d0a","snapshot":null,"tags":null,"title":"button by aadium","updated":"2024-01-22T17:00:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":787,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cti {\n background-color: #6019bd;\n padding: 17px 30px;\n border: 3px solid transparent;\n border-radius: 0.6em;\n transition: 0.2s;\n}\n\n.cti:hover {\n background-color: transparent;\n border: 3px solid #6019bd;\n box-shadow: 0px 0px 27px 5px #6019bd;\n}\n\n.CTI {\n color: #fff;\n font-family: 'Courier New', Courier, monospace;\n font-size: 17px;\n font-weight: bold;\n overflow: hidden;\n border-right: 4px solid transparent;\n white-space: nowrap;\n margin: 0 auto;\n}\n\n.cti:hover .CTI {\n border-right: 4px solid #6019bd;\n animation: letters 1.75s steps(22, end),\n cursor .4s step-end infinite;\n}\n\n@keyframes letters {\n from {\n width: 0;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes cursor {\n from {\n border-color: transparent\n }\n\n 50% {\n border-color: #6019bd\n }\n}"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"901048","snapshot":null,"tags":null,"title":"button by omriluz","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":1134,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n background: linear-gradient(245deg, #000000 0%, #fdff96 100%),\n linear-gradient(245deg, #0038ff 0%, #000000 100%),\n radial-gradient(100% 225% at 100% 0%, #4200ff 0%, #001169 100%),\n linear-gradient(245deg, #000000 0%, #ffb800 100%),\n radial-gradient(\n 115% 107% at 40% 100%,\n #eaf5ff 0%,\n #eaf5ff 40%,\n #a9c6de calc(40% + 1px),\n #a9c6de 70%,\n #247e6c calc(70% + 2px),\n #247e6c 85%,\n #e4c666 calc(85% + 2px),\n #e4c666 100%\n ),\n linear-gradient(\n 65deg,\n #083836 0%,\n #083836 40%,\n #66d37e calc(40% + 1px),\n #66d37e 60%,\n #c6e872 calc(60% + 1px),\n #c6e872 100%\n );\n background-blend-mode: overlay, screen, overlay, hard-light, overlay, normal;\n font-family: inherit;\n padding: 0.6em 1.3em;\n font-weight: 900;\n font-size: 18px;\n border: 3px solid black;\n border-radius: 0.4em;\n box-shadow: 0.1em 0.1em;\n}\n\nbutton > span {\n color: white;\n}\n\nbutton:hover {\n transform: translate(-0.05em, -0.05em);\n box-shadow: 0.15em 0.15em;\n}\n\nbutton:active {\n transform: translate(0.05em, 0.05em);\n box-shadow: 0.05em 0.05em;\n}\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"8f23b2","snapshot":null,"tags":null,"title":"button by gustavofusco","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":267,"cssLen":4093,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".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: #00135C;\n letter-spacing: 2px;\n transition: all .3s ease;\n border: none;\n background: transparent;\n}\n\n.button__text {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.button::before,\n.button::after,\n.button__text::before,\n.button__text::before {\n content: '';\n position: absolute;\n height: 3px;\n border-radius: 2px;\n background: #00135C;\n transition: all .5s ease;\n}\n\n.button::before {\n top: 0;\n left: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n\n.button::after {\n top: 0;\n right: 54px;\n width: 8px;\n}\n\n.button__text::before {\n bottom: 0;\n right: 54px;\n width: calc(100% - 56px * 2 - 16px);\n}\n\n.button__text::after {\n top: 0;\n right: 54px;\n width: 8px;\n}\n\n.button__line {\n position: absolute;\n top: 0;\n width: 56px;\n height: 100%;\n overflow: hidden;\n}\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: #00135C;\n}\n\n.button__line:nth-child(1),\n.button__line:nth-child(1)::before {\n left: 0;\n}\n\n.button__line:nth-child(2),\n.button__line:nth-child(2)::before {\n right: 0;\n}\n\n.button:hover {\n letter-spacing: 6px;\n}\n\n.button:hover::before,\n.button:hover .button__text::before {\n width: 8px;\n}\n\n.button:hover::after,\n.button:hover .button__text::after {\n width: calc(100% - 56px * 2 - 16px);\n}\n\n.button__drow1,\n.button__drow2 {\n position: absolute;\n z-index: -1;\n border: 1rem;\n transform-origin: 1rem 1rem;\n}\n\n.button__drow1 {\n top: -1rem;\n left: 40px;\n width: 2rem;\n height: 0;\n transform: rotate(30deg);\n}\n\n.button__drow2 {\n top: 44px;\n left: 77px;\n width: 2rem;\n height: 0;\n transform: rotate(-127deg);\n}\n\n.button__drow1::before,\n.button__drow1::after,\n.button__drow2::before,\n.button__drow2::after {\n content: '';\n position: absolute;\n}\n\n.button__drow1::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 2rem;\n border-radius: 1rem;\n transform-origin: 1rem 1rem;\n transform: rotate(-60deg);\n}\n\n.button__drow1::after {\n top: -10px;\n left: 45px;\n width: 0;\n height: 2rem;\n border-radius: 1rem;\n transform-origin: 1rem 1rem;\n transform: rotate(-69deg);\n}\n\n.button__drow2::before {\n bottom: 0;\n left: 0;\n width: 0;\n height: 2rem;\n border-radius: 1rem;\n transform-origin: 1rem 1rem;\n transform: rotate(-146deg);\n}\n\n.button__drow1::after {\n bottom: 26px;\n left: -40px;\n width: 0;\n height: 2rem;\n border-radius: 1rem;\n transform-origin: 1rem 1rem;\n transform: rotate(-262deg);\n}\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: dodgerblue;\n}\n\n.button:hover .button__drow1 {\n animation: drow1 ease-in .06s;\n animation-fill-mode: forwards;\n}\n\n.button:hover .button__drow1::before {\n animation: drow2 linear .08s .06s;\n animation-fill-mode: forwards;\n}\n\n.button:hover .button__drow1::after {\n animation: drow3 linear .03s .14s;\n animation-fill-mode: forwards;\n}\n\n.button:hover .button__drow2 {\n animation: drow4 linear .06s .2s;\n animation-fill-mode: forwards;\n}\n\n.button:hover .button__drow2::before {\n animation: drow3 linear .03s .26s;\n animation-fill-mode: forwards;\n}\n\n.button:hover .button__drow2::after {\n animation: drow5 linear .06s .32s;\n animation-fill-mode: forwards;\n}\n\n@keyframes drow1 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: 100px;\n }\n}\n\n@keyframes drow2 {\n 0% {\n width: 0;\n opacity: 0;\n }\n\n 10% {\n opacity: 0;\n }\n\n 11% {\n opacity: 1;\n }\n\n 100% {\n height: 120px;\n }\n}\n\n@keyframes drow3 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: 80px;\n }\n}\n\n@keyframes drow4 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: 120px;\n }\n}\n\n@keyframes drow5 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: 124px;\n }\n}\n\n.container {\n width: 100%;\n height: 300px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n\n\n"},{"created":"2024-01-22T17:00:26.000Z","isPrivate":0,"projectId":"98124c","snapshot":null,"tags":null,"title":"button by david-mohseni","updated":"2024-01-22T17:00:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":700,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".wrap {\n text-align: center;\n margin: 20px 0;\n}\n\n.btn {\n width: 100px;\n height: 100px;\n background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);\n border-radius: 50%;\n box-shadow: 0 0px 20px #0005, 0 -0px 20px #fff2;\n outline: 1px solid #fff;\n outline-offset: -2px;\n transition: 1s;\n}\n\n.text {\n font-size: 20px;\n font-weight: 700;\n color: #aaa;\n text-align: center;\n text-shadow: 1px 1px 1px #fff;\n}\n\n.btn:hover {\n transform: rotate(90deg);\n}"}]}},"actionData":null,"errors":null}