icon-cart

{"loaderData":{"0":null,"0-3":{"total":7307,"projects":[{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"2afa0a","snapshot":null,"tags":null,"title":"button by JassiSingh08","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":22,"cssLen":488,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n font-size: 20px;\n background-color: white;\n color: black;\n width: 45px;\n height: 45px;\n opacity: 0.75;\n border: 1px solid #e7eae8;\n border-radius: 8px;\n cursor: pointer;\n}\n\nbutton:hover {\n animation: bounce_513 1s infinite;\n}\n\n@keyframes bounce_513 {\n 0%,\n 100% {\n transform: translateX(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n\n 50% {\n transform: translateX(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"d78e59","snapshot":null,"tags":null,"title":"button by eslam-hany","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":683,"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 display: flex;\n align-items: center;\n justify-content: center;\n width: 140px;\n height: 40px;\n border: 3px solid #0b2447;\n color: #fff;\n font-size: 20px;\n font-weight: bolder;\n background-color: #0d6efd;\n overflow: hidden;\n transition: all 0.5s;\n cursor: pointer;\n}\n\n.hover {\n transform: translateX(0%);\n transition: all 0.5s;\n}\n\n.btn::after {\n position: absolute;\n content: attr(data-text);\n left: 0;\n transform: translateX(-100%);\n transition: all 0.5s;\n}\n\n.btn:hover::after {\n transform: translateX(50%);\n transition: all 0.5s;\n}\n\n.btn:hover .hover {\n position: absolute;\n transform: translateX(150%);\n transition: all 0.5s;\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"af8656","snapshot":null,"tags":null,"title":"button by Julian956","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":721,"cssLen":944,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-cart {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n border-radius: 10px;\n border: none;\n background-color: transparent;\n position: relative;\n}\n\n.btn-cart::after {\n content: attr(data-quantity);\n width: fit-content;\n height: fit-content;\n position: absolute;\n font-size: 15px;\n color: white;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n opacity: 0;\n visibility: hidden;\n transition: .2s linear;\n top: 115%;\n}\n\n.icon-cart {\n width: 24.38px;\n height: 30.52px;\n transition: .2s linear;\n}\n\n.icon-cart path {\n fill: rgb(240, 8, 8);\n transition: .2s linear;\n}\n\n.btn-cart:hover > .icon-cart {\n transform: scale(1.2);\n}\n\n.btn-cart:hover > .icon-cart path {\n fill: rgb(186, 34, 233);\n}\n\n.btn-cart:hover::after {\n visibility: visible;\n opacity: 1;\n top: 105%;\n}\n\n.quantity {\n display: none;\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"cd1b18","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":928,"cssLen":225,"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 width: 60px;\n height: 60px;\n border-radius: 100%;\n border: none;\n background-color: #30C04F;\n}\n\n.button:hover {\n background-color: #2bac47;\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"f2b70d","snapshot":null,"tags":null,"title":"button by KapeParaguay","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":2436,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".buttonpro {\n --btn-default-bg: black;\n --btn-padding: 15px 20px;\n --btn-hover-bg: green;\n --btn-transition: 0.3s;\n --btn-letter-spacing: 0.1rem;\n --btn-animation-duration: 1.2s;\n --btn-shadow-color: green;\n --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);\n --hover-btn-color: #7241ff;\n --default-btn-color: #fff;\n --font-size: 16px;\n --font-weight: 600;\n --font-family: Menlo, Roboto Mono, monospace;\n border-radius: 6em;\n}\n\n/* button settings 👆 */\n\n.buttonpro {\n box-sizing: border-box;\n padding: var(--btn-padding);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--default-btn-color);\n font: var(--font-weight) var(--font-size) var(--font-family);\n background: var(--btn-default-bg);\n cursor: pointer;\n transition: var(--btn-transition);\n overflow: hidden;\n box-shadow: var(--btn-shadow);\n border-radius: 6em;\n border: 2px solid #2a2b3a;\n}\n\n.buttonpro span {\n letter-spacing: var(--btn-letter-spacing);\n transition: var(--btn-transition);\n box-sizing: border-box;\n position: relative;\n background: inherit;\n}\n\n.buttonpro span::before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n background: inherit;\n}\n.buttonpro:focus {\n scale: 1.09;\n}\n.buttonpro:hover,\n.buttonpro:focus {\n background: var(--btn-default-bg);\n box-shadow: 0px 0px 10px 0px rgba(119, 68, 255, 0.7);\n border: 2px solid rgb(9, 255, 0);\n}\n\n.buttonpro:hover span,\n.buttonpro:focus span {\n color: rgb(9, 255, 0);\n}\n\n.buttonpro:hover span::before,\n.buttonpro:focus span::before {\n animation: chitchat linear both var(--btn-animation-duration);\n}\n\n@keyframes chitchat {\n 0% {\n content: \"#\";\n }\n\n 5% {\n content: \".\";\n }\n\n 10% {\n content: \"^{\";\n }\n\n 15% {\n content: \"-!\";\n }\n\n 20% {\n content: \"#$_\";\n }\n\n 25% {\n content: \"№:0\";\n }\n\n 30% {\n content: \"#{+.\";}35%{content: \"@}-?\";\n }\n\n 40% {\n content: \"?{4@%\";\n }\n\n 45% {\n content: \"=.,^!\";\n }\n\n 50% {\n content: \"?2@%\";\n }\n\n 55% {\n content: \"\\;1}]\";\n }\n\n 60% {\n content: \"?{%:%\";\n right: 0;\n }\n\n 65% {\n content: \"|{f[4\";\n right: 0;\n }\n\n 70% {\n content: \"{4%0%\";\n right: 0;\n }\n\n 75% {\n content: \"'1_0<\";\n right: 0;\n }\n\n 80% {\n content: \"{0%\";\n right: 0;\n }\n\n 85% {\n content: \"]>'\";\n right: 0;\n }\n\n 90% {\n content: \"4\";\n right: 0;\n }\n\n 95% {\n content: \"2\";\n right: 0;\n }\n\n 100% {\n content: \"\";\n right: 0;\n }\n}\n"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"3e2057","snapshot":null,"tags":null,"title":"button by andrew-demchenk0","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":425,"cssLen":608,"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: 6px 12px;\n gap: 8px;\n height: 40px;\n width: 114px;\n border: none;\n background: #1b1b1cde;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.lable {\n line-height: 20px;\n font-size: 17px;\n color: #FF342B;\n font-family: sans-serif;\n letter-spacing: 1px;\n}\n\n.button:hover {\n background: #1b1b1c;\n}\n\n.button:hover .svg-icon {\n animation: scale 1s linear infinite;\n}\n\n@keyframes scale {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.05) rotate(10deg);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:00:20.000Z","isPrivate":0,"projectId":"66b9b0","snapshot":null,"tags":null,"title":"button by Ayzen-Dev","updated":"2024-01-22T17:00:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":128,"cssLen":2803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Download\n click to download\n 1.2MB .zip\n

","css":".button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%)\n}\n\n.button a {\n display: block;\n height: 50px;\n width: 200px;\n background: #00b7ea;\n color: white;\n font: 17px/50px Helvetica, Verdana, sans-serif;\n text-decoration: none;\n text-align: center;\n text-transform: uppercase;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));\n background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\n background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\n background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\n background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );\n}\n\nb {\n background: #222;\n display: block;\n height: 40px;\n width: 180px;\n margin: -50px 0 0 10px;\n text-align: center;\n font: 12px/45px Helvetica, Verdana, sans-serif;\n color: #fff;\n position: absolute;\n z-index: -1;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n -webkit-transition: all 0.5s ease;\n -moz-transition: all 0.5s ease;\n -o-transition: all 0.5s ease;\n -ms-transition: all 0.5s ease;\n transition: all 0.5s ease;\n}\n\n.button a, b {\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n}\n\n.button:hover .top {\n margin: -80px 0 0 10px;\n line-height: 35px;\n}\n\n.button:hover .bottom {\n margin: -10px 0 0 10px;\n}\n\n.button a:active {\n background: #00b7ea;\n background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));\n background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\n background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\n background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\n background: linear-gradient(top, #00b7ea 36%,#009ec3 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );\n}\n\n.button:active .bottom {\n margin: -20px 0 0 10px;\n}\n\n.button:active .top {\n margin: -70px 0 0 10px;\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"fd50ce","snapshot":null,"tags":null,"title":"button by Amikas","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":461,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n background-color: #333;\n color: #fff;\n padding: 12px 24px;\n border: none;\n border-radius: 5px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n font-size: 17px;\n}\n\n.button:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);\n background-color: rgb(128, 95, 247);\n}\n\n.button:active {\n transform: translateY(0.5em);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"9ad50b","snapshot":null,"tags":null,"title":"button by Yaya12085","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":358,"cssLen":841,"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 display: inline-block;\n width: 150px;\n height: 50px;\n text-align: center;\n text-transform: uppercase;\n background-color: transparent;\n cursor: pointer;\n font-weight: 900;\n font-size: 17px;\n border: none;\n outline: none;\n}\n\n.btn svg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.btn svg rect {\n stroke-width: 3;\n stroke-dasharray: 0,0;\n stroke-dashoffset: 0;\n -webkit-transition: all .6s ease;\n transition: all .6s ease;\n}\n\n.btn span {\n background: rgba(255,130,130,1);\n background: linear-gradient(to right, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.btn:hover svg rect {\n stroke-width: 4;\n stroke-dasharray: 196, 543;\n stroke-dashoffset: 437;\n}\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"6b2001","snapshot":null,"tags":null,"title":"button by Rodrypaladin","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".button {\n padding: 10px 20px;\n font-size: 1.1rem;\n background-color: rgb(74, 153, 255);\n border: none;\n color: white;\n position: relative;\n width: 120px;\n height: 45px;\n transition: background-color 0.2s ease-in, all 0.15s ease-in;\n}\n\nbutton::after {\n display: flex;\n align-items: center;\n justify-content: center;\n content: \"Button\";\n width: 120px;\n height: 45px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(5px, 5px);\n background-color: rgb(1, 111, 255);\n transition: all 0.15s ease-in;\n}\n\nbutton:hover::after {\n transform: translate(-5px, -6px);\n}\n\nbutton:hover {\n transform: translate(5px, 5px);\n}\n\nbutton:active::after {\n background-color: rgb(0, 83, 192);\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"3d5531","snapshot":null,"tags":null,"title":"button by ahkamboh","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":389,"cssLen":862,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cssbuttons-io {\n position: relative;\n font-family: inherit;\n font-weight: 500;\n font-size: 18px;\n letter-spacing: 0.05em;\n border-radius: 0.8em;\n border: none;\n background: linear-gradient(to top , #8f1e8f, #4a00e0);\n color: ghostwhite;\n overflow: hidden;\n cursor: pointer;\n}\n\n.cssbuttons-io svg {\n width: 1.2em;\n height: 1.2em;\n margin-right: 0.5em;\n}\n\n.cssbuttons-io span {\n position: relative;\n z-index: 10;\n transition: color 0.4s;\n display: inline-flex;\n align-items: center;\n padding: 0.8em 1.2em 0.8em 1.05em;\n}\n\n.cssbuttons-io::before,\n.cssbuttons-io::after {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.cssbuttons-io::before {\n content: \"\";\n background: rgb(0, 0, 0);\n transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);\n}\n\n.cssbuttons-io:hover::before {\n transform: translate3d(0, -100%, 0);\n}\n\n"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"0770f8","snapshot":null,"tags":null,"title":"button by garerim","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":1125,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n z-index: 2;\n display: block;\n width: fit-content;\n height: auto;\n outline: none;\n border: none;\n background-color: inherit;\n font-size: 24px;\n font-weight: bold;\n padding: 10px 20px;\n position: relative;\n cursor: pointer;\n}\n\nbutton::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n z-index: 3;\n position: absolute;\n top: 0%;\n left: 0%;\n transform: scaleX(0.2) scaleY(0.5) translate(250%, 100%);\n border-top: solid 2px #333;\n border-left: solid 4px #333;\n transition: all .4s ease-in-out;\n}\n\nbutton::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n z-index: 3;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.5);\n border-bottom: solid 2px #333;\n border-right: solid 4px #333;\n transition: all .4s ease-in-out;\n}\n\nbutton:hover::before {\n transform: translate(0%, 0%) scaleX(1) scaleY(1);\n border-top: solid 1px #333;\n border-left: solid 1px #333;\n}\n\nbutton:hover::after {\n transform: scaleX(1) scaleY(1) translate(0%, 0%);\n border-bottom: solid 1px #333;\n border-right: solid 1px #333;\n}"}]}},"actionData":null,"errors":null}