{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"b83d71","snapshot":null,"tags":null,"title":"button by dylanharriscameron","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":2675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".delete-button {\n background-color: #000;\n color: #fff;\n font-size: 44px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n padding-bottom: 8px;\n width: 60px;\n height: 65px;\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.delete-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.delete-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.delete-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.delete-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.delete-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@keyframes overlay {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.delete-button:focus {\n outline: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"d35cdb","snapshot":null,"tags":null,"title":"button by niat786","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n border-radius: .25rem;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n padding-left: 25px;\n padding-right: 25px;\n color: #fff;\n -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);\n height: 40px;\n font-size: 0.7rem;\n line-height: 14px;\n letter-spacing: 1.2px;\n transition: .2s .1s;\n background-image: linear-gradient(90deg,#1c1c1c,#6220fb);\n border: 0 solid;\n overflow: hidden;\n}\n\nbutton:hover {\n cursor: pointer;\n transition: all .3s ease-in;\n padding-right: 30px;\n padding-left: 30px;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"8a3d04","snapshot":null,"tags":null,"title":"button by e-coders","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":1216,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n appearance: none;\n background-color: #FAFBFC;\n border: 1px solid rgba(27, 31, 35, 0.15);\n border-radius: 6px;\n box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;\n box-sizing: border-box;\n color: #24292E;\n cursor: pointer;\n display: inline-block;\n font-family: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n list-style: none;\n padding: 6px 16px;\n position: relative;\n transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n vertical-align: middle;\n white-space: nowrap;\n word-wrap: break-word;\n}\n\nbutton:hover {\n background-color: #F3F4F6;\n text-decoration: none;\n transition-duration: 0.1s;\n}\n\nbutton:disabled {\n background-color: #FAFBFC;\n border-color: rgba(27, 31, 35, 0.15);\n color: #959DA5;\n cursor: default;\n}\n\nbutton:active {\n background-color: #EDEFF2;\n box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;\n transition: none 0s;\n}\n\nbutton:focus {\n outline: 1px transparent;\n}\n\nbutton:before {\n display: none;\n}\n\nbutton:-webkit-details-marker {\n display: none;\n}"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"724eea","snapshot":null,"tags":null,"title":"button by vikiWayne","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":679,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n padding: 1em 2em;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n letter-spacing: 5px;\n text-transform: uppercase;\n cursor: pointer;\n color: #2c9caf;\n transition: all 1000ms;\n font-size: 15px;\n position: relative;\n overflow: hidden;\n outline: 2px solid #2c9caf;\n}\n\nbutton:hover {\n color: #ffffff;\n transform: scale(1.1);\n outline: 2px solid #70bdca;\n box-shadow: 4px 5px 17px -4px #268391;\n}\n\nbutton::before {\n content: \"\";\n position: absolute;\n left: -50px;\n top: 0;\n width: 0;\n height: 100%;\n background-color: #2c9caf;\n transform: skewX(45deg);\n z-index: -1;\n transition: width 1000ms;\n}\n\nbutton:hover::before {\n width: 250%;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"51e17e","snapshot":null,"tags":null,"title":"button by mrhyddenn","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":168,"cssLen":1770,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n border: none;\n background: none;\n color: #0f1923;\n cursor: pointer;\n position: relative;\n padding: 8px;\n margin-bottom: 20px;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 14px;\n transition: all .15s ease;\n}\n\n.button::before,\n.button::after {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n left: 0;\n height: calc(50% - 5px);\n border: 1px solid #7D8082;\n transition: all .15s ease;\n}\n\n.button::before {\n top: 0;\n border-bottom-width: 0;\n}\n\n.button::after {\n bottom: 0;\n border-top-width: 0;\n}\n\n.button:active,\n.button:focus {\n outline: none;\n}\n\n.button:active::before,\n.button:active::after {\n right: 3px;\n left: 3px;\n}\n\n.button:active::before {\n top: 3px;\n}\n\n.button:active::after {\n bottom: 3px;\n}\n\n.button_lg {\n position: relative;\n display: block;\n padding: 10px 20px;\n color: #fff;\n background-color: #0f1923;\n overflow: hidden;\n box-shadow: inset 0px 0px 0px 1px transparent;\n}\n\n.button_lg::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: 2px;\n background-color: #0f1923;\n}\n\n.button_lg::after {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n width: 4px;\n height: 4px;\n background-color: #0f1923;\n transition: all .2s ease;\n}\n\n.button_sl {\n display: block;\n position: absolute;\n top: 0;\n bottom: -1px;\n left: -8px;\n width: 0;\n background-color: #ff4655;\n transform: skew(-15deg);\n transition: all .2s ease;\n}\n\n.button_text {\n position: relative;\n}\n\n.button:hover {\n color: #0f1923;\n}\n\n.button:hover .button_sl {\n width: calc(100% + 15px);\n}\n\n.button:hover .button_lg::after {\n background-color: #fff;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"4b9528","snapshot":null,"tags":null,"title":"button by david-mohseni","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":448,"cssLen":1756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Facebook\n \n
\n Twitter\n \n
\n Instagram\n \n

","css":".wrapper {\n display: inline-flex;\n list-style: none;\n height: 120px;\n width: 100%;\n padding-top: 40px;\n font-family: \"Poppins\", sans-serif;\n justify-content: center;\n}\n\n.wrapper .icon {\n position: relative;\n background: #fff;\n border-radius: 50%;\n margin: 10px;\n width: 50px;\n height: 50px;\n font-size: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip {\n position: absolute;\n top: 0;\n font-size: 14px;\n background: #fff;\n color: #fff;\n padding: 5px 8px;\n border-radius: 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .tooltip::before {\n position: absolute;\n content: \"\";\n height: 8px;\n width: 8px;\n background: #fff;\n bottom: -3px;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.wrapper .icon:hover .tooltip {\n top: -45px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.wrapper .icon:hover span,\n.wrapper .icon:hover .tooltip {\n text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);\n}\n\n.wrapper .facebook:hover,\n.wrapper .facebook:hover .tooltip,\n.wrapper .facebook:hover .tooltip::before {\n background: #1877F2;\n color: #fff;\n}\n\n.wrapper .twitter:hover,\n.wrapper .twitter:hover .tooltip,\n.wrapper .twitter:hover .tooltip::before {\n background: #1DA1F2;\n color: #fff;\n}\n\n.wrapper .instagram:hover,\n.wrapper .instagram:hover .tooltip,\n.wrapper .instagram:hover .tooltip::before {\n background: #E4405F;\n color: #fff;\n}\n\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"1a4361","snapshot":null,"tags":null,"title":"button by shah1345","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button2 {\n display: inline-block;\n transition: all 0.2s ease-in;\n position: relative;\n overflow: hidden;\n z-index: 1;\n color: #090909;\n padding: 0.7em 1.7em;\n cursor: pointer;\n font-size: 18px;\n border-radius: 0.5em;\n background: #e8e8e8;\n border: 1px solid #e8e8e8;\n box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;\n}\n\n.button2:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;\n}\n\n.button2:before {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\n top: 100%;\n width: 140%;\n height: 180%;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button2:after {\n content: \"\";\n position: absolute;\n left: 55%;\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\n top: 180%;\n width: 160%;\n height: 190%;\n background-color: #009087;\n border-radius: 50%;\n display: block;\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\n z-index: -1;\n}\n\n.button2:hover {\n color: #ffffff;\n border: 1px solid #009087;\n}\n\n.button2:hover:before {\n top: -35%;\n background-color: #009087;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n\n.button2:hover:after {\n top: -45%;\n background-color: #009087;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"57e5d7","snapshot":null,"tags":null,"title":"button by adamgiebl","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":536,"cssLen":866,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"button {\n font-family: inherit;\n font-size: 20px;\n background: royalblue;\n color: white;\n padding: 0.7em 1em;\n padding-left: 0.9em;\n display: flex;\n align-items: center;\n border: none;\n border-radius: 16px;\n overflow: hidden;\n transition: all 0.2s;\n cursor: pointer;\n}\n\nbutton span {\n display: block;\n margin-left: 0.3em;\n transition: all 0.3s ease-in-out;\n}\n\nbutton svg {\n display: block;\n transform-origin: center center;\n transition: transform 0.3s ease-in-out;\n}\n\nbutton:hover .svg-wrapper {\n animation: fly-1 0.6s ease-in-out infinite alternate;\n}\n\nbutton:hover svg {\n transform: translateX(1.2em) rotate(45deg) scale(1.1);\n}\n\nbutton:hover span {\n transform: translateX(5em);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n@keyframes fly-1 {\n from {\n transform: translateY(0.1em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"98ae4e","snapshot":null,"tags":null,"title":"button by alexmaracinaru","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":711,"cssLen":507,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n cursor: pointer;\n font-weight: 700;\n font-family: Helvetica,\"sans-serif\";\n transition: all .2s;\n padding: 10px 20px;\n border-radius: 100px;\n background: #cfef00;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n font-size: 15px;\n}\n\nbutton:hover {\n background: #c4e201;\n}\n\nbutton > svg {\n width: 34px;\n margin-left: 10px;\n transition: transform .3s ease-in-out;\n}\n\nbutton:hover svg {\n transform: translateX(5px);\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"10ef0b","snapshot":null,"tags":null,"title":"button by alshahwan","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1272,"cssLen":618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #fff;\n border: 1px solid #25D366;\n padding: 5px;\n position: relative;\n width: 6.2em;\n height: 2em;\n transition: 0.5s;\n font-size: 17px;\n border-radius: 0.4em;\n}\n\nbutton p {\n position: absolute;\n top: 0.4em;\n left: 1.15em;\n margin: 0;\n padding: 0;\n transition: .5s;\n color: #25D366;\n}\n\nbutton svg {\n position: absolute;\n top: 0.45em;\n right: 0.5em;\n margin: 0;\n padding: 0;\n opacity: 0;\n transition: 0.5s;\n height: 1em;\n fill: #fff\n}\n\nbutton:hover p {\n left: 0.5em;\n color: #fff\n}\n\nbutton:hover svg {\n opacity: 1;\n}\n\nbutton:hover {\n background-color: #25D366;\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"e852a9","snapshot":null,"tags":null,"title":"button by doniaskima","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":2351,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".btn-96,\n.btn-96 *,\n.btn-96 :after,\n.btn-96 :before,\n.btn-96:after,\n.btn-96:before {\n border: 0 solid;\n box-sizing: border-box;\n}\n\n.btn-96 {\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-96:disabled {\n cursor: default;\n}\n\n.btn-96:-moz-focusring {\n outline: auto;\n}\n\n.btn-96 svg {\n display: block;\n vertical-align: middle;\n}\n\n.btn-96 [hidden] {\n display: none;\n}\n\n.btn-96 {\n box-sizing: border-box;\n display: block;\n font-weight: 900;\n -webkit-mask-image: none;\n padding: 2rem 5rem;\n perspective: 800px;\n position: relative;\n text-transform: uppercase;\n transform-style: preserve-3d;\n}\n\n.btn-96 span {\n background: #fff;\n color: #000;\n display: grid;\n inset: 0;\n place-items: center;\n position: absolute;\n transform: rotateX(0deg);\n transform-origin: top center;\n transition: 0.2s;\n}\n\n.btn-96:hover span {\n transform: rotateX(35deg);\n}\n\n.btn-96:after,\n.btn-96:before {\n background: #ddd;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transform: rotateX(0deg);\n width: 100%;\n z-index: -1;\n}\n\n.btn-96:after {\n background: #ccc;\n width: 0;\n}\n\n.btn-96:hover:after {\n -webkit-animation: progress-bar 1.2s;\n animation: progress-bar 1.2s;\n}\n\n@-webkit-keyframes progress-bar {\n 0% {\n opacity: 1;\n width: 0;\n }\n\n 10% {\n opacity: 1;\n width: 15%;\n }\n\n 25% {\n opacity: 1;\n width: 25%;\n }\n\n 40% {\n opacity: 1;\n width: 35%;\n }\n\n 55% {\n opacity: 1;\n width: 75%;\n }\n\n 60% {\n opacity: 1;\n width: 100%;\n }\n\n to {\n opacity: 0;\n width: 100%;\n }\n}\n\n@keyframes progress-bar {\n 0% {\n opacity: 1;\n width: 0;\n }\n\n 10% {\n opacity: 1;\n width: 15%;\n }\n\n 25% {\n opacity: 1;\n width: 25%;\n }\n\n 40% {\n opacity: 1;\n width: 35%;\n }\n\n 55% {\n opacity: 1;\n width: 75%;\n }\n\n 60% {\n opacity: 1;\n width: 100%;\n }\n\n to {\n opacity: 0;\n width: 100%;\n }\n}\n"},{"created":"2024-01-22T16:59:50.000Z","isPrivate":0,"projectId":"7b663c","snapshot":null,"tags":null,"title":"button by ernestnash","updated":"2024-01-22T16:59:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":554,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\nI am a button","css":".btn {\n display: inline-block;\n padding: 0.9rem 1.8rem;\n font-size: 16px;\n font-weight: 700;\n color: white;\n border: 3px solid rgb(252, 70, 100);\n cursor: pointer;\n position: relative;\n background-color: transparent;\n text-decoration: none;\n overflow: hidden;\n z-index: 1;\n font-family: inherit;\n}\n\n.btn::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(252, 70, 100);\n transform: translateX(-100%);\n transition: all .3s;\n z-index: -1;\n}\n\n.btn:hover::before {\n transform: translateX(0);\n}"}]}},"actionData":null,"errors":null}