{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"1119f0","snapshot":null,"tags":null,"title":"button by KINGFRESS","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":163,"cssLen":1451,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: transparent;\n width: 13em;\n height: 3.3em;\n border: 2px solid #1abc9c;\n border-radius: 25px;\n font-weight: bold;\n text-transform: uppercase;\n color: #1abc9c;\n padding: 2px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\nbutton .txt {\n transition: .4s ease-in-out;\n position: absolute;\n}\n\nbutton .txt2 {\n transform: translateY(1em) scale(0);\n color: #212121;\n position: absolute;\n}\n\nbutton .loader-container {\n height: 100%;\n width: 100%;\n background-color: transparent;\n border-radius: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: -1;\n overflow: hidden;\n}\n\nbutton .loader-container .loader {\n height: 100%;\n width: 100%;\n background-color: #1abc9c;\n border-radius: inherit;\n transform: translateX(-13em);\n}\n\nbutton:focus {\n transition: .4s ease-in-out .4s;\n animation: scaling 1.5s ease-in-out 0s 1 both;\n}\n\nbutton:focus .txt {\n position: absolute;\n transform: translateY(-5em);\n transition: .4s ease-in-out;\n}\n\nbutton:focus .txt2 {\n transform: translateY(0) scale(1);\n transition: .3s ease-in-out 1.7s;\n}\n\nbutton:focus .loader {\n display: block;\n transform: translate(0);\n transition: .8s cubic-bezier(0,.4,1,.28) .4s;\n animation: loading;\n}\n\n@keyframes scaling {\n 20% {\n height: 1.5em;\n }\n\n 80% {\n height: 1.5em;\n }\n\n 100% {\n height: 3.3em;\n }\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"da7585","snapshot":null,"tags":null,"title":"button by gharsh11032000","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":1200,"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 background-color: #333;\n color: #e8e8e8;\n font-size: 17px;\n font-weight: 600;\n width: 150px;\n height: 60px;\n border-radius: 50em;\n border: none;\n cursor: pointer;\n text-transform: uppercase;\n overflow: hidden;\n box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::before {\n content: \"Hello!\";\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: 50em;\n background: linear-gradient(135deg,#7b4397,#dc2430 );\n transform: translate(-100%, 0%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button::after {\n content: \"Hover me\";\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: 50em;\n transform: translate(0%,-100%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.button:hover::before {\n transform: translate(0%, 0%);\n}\n\n.button:hover::after {\n transform: translate(100%,-100%);\n}\n\n.button:focus {\n outline: none;\n}\n\n.button:active {\n scale: 0.95;\n}\n\n\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"1649bf","snapshot":null,"tags":null,"title":"button by Bastimans","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":1158,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #ffc600;\n /* sets the background color of the button to yellow */\n color: #000000;\n /* sets the text color of the button to black */\n padding: 12px 24px;\n /* adds some padding to the button */\n border: none;\n /* remove the default border */\n border-radius: 30px;\n /* rounds the corners of the button */\n font-size: 18px;\n /* sets the font size of the button text */\n font-weight: bold;\n /* sets the font weight of the button text to bold */\n cursor: pointer;\n /* changes the cursor to a pointer when hovering over the button */\n text-shadow: 2px 2px 3px #ffc600;\n /* adds a subtle shadow to the button text */\n box-shadow: 2px 2px 3px #ffc600;\n /* adds a subtle shadow to the button */\n transition: all 0.2s ease-in-out;\n /* adds transition effect when hovering over the button */\n}\n\nbutton:hover {\n background-color: #000000;\n /* changes the background color of the button to black when hovered */\n color: #ffc600;\n /* changes the text color of the button to yellow when hovered */\n transform: scale(1.1);\n /* increases the size of the button slightly when hovered */\n}\n\nbutton:active {\n transform: scale(0.97);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"98da1d","snapshot":null,"tags":null,"title":"button by vinodjangid07","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":86,"cssLen":818,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".Btn {\n position: relative;\n background-color: transparent;\n border: none;\n width: 100px;\n height: 40px;\n border-radius: 5px;\n cursor: pointer;\n transition: all .3s;\n}\n\n.text {\n width: 100%;\n height: 100%;\n background-color: rgba(230, 230, 230, 0.466);\n border: none;\n border-radius: 7px;\n backdrop-filter: blur(5px);\n color: rgb(26, 26, 26);\n display: flex;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n letter-spacing: 0.8px;\n}\n\n.BG {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background-image: linear-gradient(147deg, #FFE53B, #FF2525);\n z-index: -1;\n left: 6px;\n top: 6px;\n border-radius: 7px;\n pointer-events: none;\n transition: all .3s;\n}\n\n.Btn:hover {\n transform: translateY(-2px);\n}\n\n.Btn:hover .BG {\n transform: translateY(-1px);\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"3595c7","snapshot":null,"tags":null,"title":"button by jdm-encompass","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":584,"cssLen":1076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"
","css":".button {\n background-color: #1877F2;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);\n animation: sway 2s infinite alternate;\n width: 70px;\n height: 70px;\n display: flex;\n justify-content: center;\n align-items: center;\n perspective: 500px;\n transition: transform 0.5s, box-shadow 0.5s;\n}\n\n.button:hover {\n transform: rotate(-360deg);\n box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5);\n}\n\n@keyframes grow {\n 0% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(10);\n }\n}\n\n@keyframes glow {\n 0% {\n text-shadow: gold 1px 1px 1px;\n }\n\n 100% {\n text-shadow: gold 0 0 10px gold;\n }\n}\n\n.icon {\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));\n transition: transform 0.5s;\n}\n\n.icon:hover {\n transform: scale(1.5);\n filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9))\n}\n\n.follow-text {\n color: white;\n position: relative;\n top: 3em;\n left: -4em;\n transition: transform 0.5s;\n}\n\n.follow-text:hover {\n transform: scale(1.2);\n color: rgba(31,81,255,100);\n filter: drop-shadow(2px 2px 4px rgba(31,81,255,2.0))\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"a83332","snapshot":null,"tags":null,"title":"button by Cornerstone-04","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":523,"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 background: none;\n border: solid 1px #121212;\n transition: linear 250ms;\n width: 100px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1rem;\n}\n\nbutton:is(:hover,:focus) {\n color: #fff;\n}\n\nbutton::after {\n position: absolute;\n content: '';\n inset: 0;\n z-index: -1;\n background-color: #121212;\n transform-origin: left;\n transform: scaleX(0);\n transition: linear 250ms;\n}\n\nbutton:is(:hover, :focus)::after {\n transform: scale(1);\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"d48319","snapshot":null,"tags":null,"title":"button by TISEPSE","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":51,"cssLen":911,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #FF9B82;\n cursor: pointer;\n padding: 1em;\n width: 10rem;\n font-size: 17px;\n box-shadow: 0 0.4rem #FFC8C8;\n border-radius: 27px;\n border: none;\n overflow: hidden;\n z-index: 2;\n transition: 0.2s;\n border: 2px solid black;\n}\n\n.button:hover {\n transform: translateY(0.2rem);\n box-shadow: 0 0.25rem #FFC8C8;\n letter-spacing: 2px;\n color: #fefefe;\n}\n\n.button:active {\n transform: translateY(0.6rem);\n box-shadow: none;\n}\n\n.button span {\n background: #E48586;\n border-radius: 27px;\n height: 100%;\n width: 0%;\n position: absolute;\n left: 0;\n bottom: 0;\n z-index: -1;\n transition: 0.2s ease-in-out;\n}\n\n.button:hover span {\n width: 100%;\n}\n\n.button span {\n background: #E48586;\n border-radius: 27px;\n height: 100%;\n width: 0%;\n position: absolute;\n left: 0;\n bottom: 0;\n z-index: -1;\n transition: 0.2s ease-in-out;\n}\n\n.button:hover span {\n width: 100%;\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"13149c","snapshot":null,"tags":null,"title":"button by JaydipPrajapati1910","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1346,"cssLen":929,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n max-width: 320px;\n display: flex;\n overflow: hidden;\n position: relative;\n padding: 0.875rem 72px 0.875rem 1.75rem;\n background-color: rgba(88,101,242,1);\n background-image: linear-gradient(to top right,rgb(46, 56, 175),rgb(82, 93, 218));\n color: #ffffff;\n font-size: 15px;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n gap: 0.75rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n border: none;\n transition: all .6s ease;\n}\n\nbutton span {\n background-color: rgb(82, 93, 218);\n display: grid;\n position: absolute;\n right: 0;\n place-items: center;\n width: 3rem;\n height: 100%;\n}\n\nbutton span svg {\n width: 1.5rem;\n height: 1.5rem;\n}\n\nbutton:hover {\n box-shadow: 0 4px 30px rgba(4, 175, 255, .1), 0 2px 30px rgba(11, 158, 255, 0.06);\n}"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"1b57a5","snapshot":null,"tags":null,"title":"button by itay1313","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n\n","css":".box {\n --border-radius: 4vmin;\n --bg: #3A3544;\n --color: #D0BCFF;\n --deg: 30deg;\n -webkit-perspective: 200px;\n perspective: 200px;\n -webkit-transform-origin: top center;\n -ms-transform-origin: top center;\n transform-origin: top center;\n max-width: 350px;\n text-align: center;\n outline: none;\n border: none;\n background: none;\n}\n\n.button {\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transform: rotateY(var(--deg));\n transform: rotateY(var(--deg));\n -webkit-transition: all 800ms ease-in-out;\n transition: all 800ms ease-in-out;\n border-radius: var(--border-radius);\n font-style: normal;\n border: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: 2vmin;\n letter-spacing: 0.03vmin;\n padding: 1.3vmin 2.5vmin;\n background: var(--bg);\n color: var(--color);\n}\n\n.button:hover {\n -webkit-transform: rotateY(calc(-1 * var(--deg)));\n transform: rotateY(calc(-1 * var(--deg)));\n}\n\n.box:active .button {\n -webkit-transform: rotateY(calc(-1 * var(--deg) / 3));\n transform: rotateY(calc(-1 * var(--deg) / 3));\n}\n\n.box:focus .button {\n border: 0.05vmin solid var(--color);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"cbd6c0","snapshot":null,"tags":null,"title":"button by escannord","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n hover me\n \n

\n","css":".button {\n --color: rgb(56, 55, 100);\n padding: 1rem 2rem;\n background-color: transparent;\n color: var(--color);\n font-weight: bolder;\n text-transform: uppercase;\n display: flex;\n justify-content: space-around;\n align-items: center;\n cursor: pointer;\n position: relative;\n border-radius: 5px;\n}\n\n.arrow {\n display: inline-flex;\n position: relative;\n width: 30px;\n height: 15px;\n margin-left: 0.5rem;\n}\n\n.arrow::after,\n.arrow::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n border-color: var(--color);\n}\n\n.arrow::after {\n width: 10px;\n height: 0;\n border: 2px solid var(--color);\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.arrow::before {\n width: 10px;\n height: 10px;\n border-top: 4px solid var(--color);\n border-right: 4px solid var(--color);\n left: 3px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n}\n\n.button:hover {\n background-color: var(--color);\n color: white;\n}\n\n.button:hover .arrow {\n transform: translateX(10px);\n}\n\n.button:hover .text {\n transform: translateX(10px);\n}\n\n.button:hover .arrow::after {\n width: 25px;\n border-color: white;\n}\n\n.button:hover .arrow::before {\n left: 15px;\n border-color: white;\n}\n\n.button,\n.text,\n.arrow,\n.arrow::after,\n.arrow::before,\n.button::before,\n.button::after {\n transition: all 0.3s, box-shadow 0.2s;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 10px;\n border-radius: 5px;\n border: solid 3px var(--color);\n border-right-color: transparent;\n background-color: transparent;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 10px;\n border-radius: 5px;\n border: solid 3px var(--color);\n border-left-color: transparent;\n background-color: transparent;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.button:hover:before,\n.button:hover:after {\n width: 50% !important;\n}\n\n.button:active {\n box-shadow: 0px 0px 0px 7px rgba(79, 78, 105, 0.295);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"dec120","snapshot":null,"tags":null,"title":"button by PriyanshuGupta28","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":644,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".my-button {\n display: inline-block;\n padding: 10px 20px;\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: white;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n transition: 0.2s ease-in-out;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.my-button:hover {\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.my-button:active {\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n}\n"},{"created":"2024-01-22T17:00:44.000Z","isPrivate":0,"projectId":"dc093f","snapshot":null,"tags":null,"title":"button by Dashrath-Sharma","updated":"2024-01-22T17:00:44.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n color: red;\n outline: none;\n border: none;\n font-size: 17px;\n padding: 1em 2em;\n position: relative;\n background: none;\n cursor: pointer;\n}\n\nbutton:active {\n transform: scale(.98);\n box-shadow: .1px .1px 2px red;\n}\n\nbutton span {\n position: absolute;\n background: red;\n transition: .5s;\n box-shadow: 1px 1px 20px red;\n}\n\nbutton span:nth-child(1) {\n top: 0;\n left: 0;\n width: 3px;\n height: 30%;\n}\n\nbutton:hover span:nth-child(1) {\n height: 100%;\n}\n\nbutton span:nth-child(2) {\n top: 0;\n left: 0;\n width: 15%;\n height: 3px;\n}\n\nbutton:hover span:nth-child(2) {\n width: 100%;\n}\n\nbutton span:nth-child(3) {\n bottom: 0;\n right: 0;\n width: 3px;\n height: 30%;\n}\n\nbutton:hover span:nth-child(3) {\n height: 100%;\n}\n\nbutton span:nth-child(4) {\n bottom: 0;\n right: 0;\n width: 15%;\n height: 3px;\n}\n\nbutton:hover span:nth-child(4) {\n width: 100%;\n}"}]}},"actionData":null,"errors":null}