icon-cart

{"loaderData":{"0":null,"0-2":{"total":7074,"projects":[{"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}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"36d979","snapshot":null,"tags":null,"title":"button by Yashasewi","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":305,"cssLen":1877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"button {\n background: transparent;\n color: #fff;\n border: 3px solid #fff;\n border-radius: 50px;\n padding: 0.8rem 2rem;\n font: 18px \"Margarine\", sans-serif;\n outline: none;\n cursor: pointer;\n position: relative;\n transition: 0.2s ease-in-out;\n letter-spacing: 2px;\n}\n\n.name {\n width: 100%;\n text-align: center;\n padding: 0 0 3rem;\n padding-top: 4rem;\n font: 500 14px \"Rubik\", sans-serif;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);\n}\n\n.button-parrot .parrot {\n position: absolute;\n width: 60px;\n text-align: center;\n animation: blink 0.8s infinite;\n color: transparent;\n}\n\n.button-parrot .parrot:before {\n content: \"Click Me!\";\n}\n\n.button-parrot .parrot:nth-child(1) {\n top: -30px;\n left: -40px;\n font: 12px/1 \"Margarine\", sans-serif;\n transform: rotate(-20deg);\n animation-duration: 0.5s;\n}\n\n.button-parrot .parrot:nth-child(2) {\n font: 12px/1 \"Margarine\", sans-serif;\n right: -40px;\n top: -20px;\n transform: rotate(15deg);\n animation-duration: 0.3s;\n}\n\n.button-parrot .parrot:nth-child(3) {\n font: 16px/1 \"Margarine\", sans-serif;\n top: -60px;\n left: 15px;\n transform: rotate(10deg);\n animation-duration: 1s;\n}\n\n.button-parrot .parrot:nth-child(4) {\n font: 18px/1 \"Margarine\", sans-serif;\n top: -70px;\n left: 95px;\n transform: rotate(2deg);\n animation-duration: 0.7s;\n}\n\n.button-parrot .parrot:nth-child(5) {\n font: 14px/1 \"Margarine\", sans-serif;\n top: 80px;\n left: 105px;\n transform: rotate(-20deg);\n animation-duration: 0.8s;\n}\n\n.button-parrot .parrot:nth-child(6) {\n font: 12px/1 \"Margarine\", sans-serif;\n top: 80px;\n left: 5px;\n transform: rotate(10deg);\n animation-duration: 1.2s;\n}\n\n.button-parrot button:hover .parrot:before {\n content: \"Do it!\";\n width: 70px;\n}\n\n@keyframes blink {\n 25%, 75% {\n color: transparent;\n }\n\n 40%, 60% {\n color: #fff;\n }\n}"},{"created":"2024-01-22T17:00:19.000Z","isPrivate":0,"projectId":"725a3f","snapshot":null,"tags":null,"title":"button by amirhoseinman2019","updated":"2024-01-22T17:00:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11079,"cssLen":4715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HOVER

FOR

SOCIAL

","css":".main_back {\n position: absolute;\n border-radius: 10px;\n transform: rotate(90deg);\n width: 11em;\n height: 11em;\n background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);\n z-index: -2;\n box-shadow: inset 0px 0px 180px 5px #ffffff;\n}\n\n.main {\n display: flex;\n flex-wrap: wrap;\n width: 14em;\n align-items: center;\n justify-content: center;\n z-index: -1;\n}\n\n.card {\n width: 60px;\n height: 60px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;\n background: rgba(255, 255, 255, 0.596);\n backdrop-filter: blur(5px);\n border: 1px solid transparent;\n -webkit-backdrop-filter: blur(5px);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .instagram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #cc39a4;\n}\n\n.card:nth-child(2) {\n border-radius: 0px;\n}\n\n.card:nth-child(2) .twitter {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #03A9F4;\n}\n\n.card:nth-child(3) {\n border-top-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(3) .dribble {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #ffb5d2;\n}\n\n.card:nth-child(4) {\n border-radius: 0px;\n}\n\n.card:nth-child(4) .codepen {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(5) {\n border-radius: 0px;\n}\n\n.card:nth-child(5) .uiverse {\n position: absolute;\n margin-left: 0.2em;\n margin-top: 0.2em;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.card:nth-child(6) {\n border-radius: 0px;\n}\n\n.card:nth-child(6) .discord {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #8c9eff;\n}\n\n.card:nth-child(7) {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(7) .github {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(8) {\n border-radius: 0px;\n}\n\n.card:nth-child(8) .telegram {\n opacity: 0;\n transition: .2s ease-in-out;\n fill: #29b6f6;\n}\n\n.card:nth-child(9) {\n border-bottom-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(9) .reddit {\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.main:hover {\n width: 14em;\n cursor: pointer;\n}\n\n.main:hover .main_back {\n opacity: 0;\n}\n\n.main:hover .card {\n margin: .2em;\n border-radius: 10px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.2);\n}\n\n.main:hover .card:nth-child(5) {\n border: transparent;\n}\n\n.main:hover .text {\n opacity: 0;\n z-index: -3;\n}\n\n.main:hover .instagram {\n opacity: 1;\n}\n\n.main:hover .twitter {\n opacity: 1;\n}\n\n.main:hover .dribble {\n opacity: 1;\n}\n\n.main:hover .codepen {\n opacity: 1;\n}\n\n.main:hover .uiverse {\n opacity: 1;\n}\n\n.main:hover .discord {\n opacity: 1;\n}\n\n.main:hover .github {\n opacity: 1;\n}\n\n.main:hover .telegram {\n opacity: 1;\n}\n\n.main:hover .reddit {\n opacity: 1;\n}\n\n.card:nth-child(1):hover {\n background-color: #cc39a4;\n}\n\n.card:nth-child(1):hover .instagram {\n fill: white;\n}\n\n.card:nth-child(2):hover {\n background-color: #03A9F4;\n}\n\n.card:nth-child(2):hover .twitter {\n fill: white;\n}\n\n.card:nth-child(3):hover {\n background-color: #ffb5d2;\n}\n\n.card:nth-child(3):hover .dribble {\n fill: white;\n}\n\n.card:nth-child(4):hover {\n background-color: #1E1F26;\n}\n\n.card:nth-child(4):hover .codepen {\n fill: white;\n}\n\n.card:nth-child(5):hover {\n animation: backgroundIMG .1s;\n animation-fill-mode: forwards;\n}\n\n.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {\n stop-color: white;\n}\n\n@keyframes backgroundIMG {\n 100% {\n background-image: linear-gradient(#BF66FF,#6248FF,#00DDEB);\n }\n}\n\n.card:nth-child(6):hover {\n background-color: #8c9eff;\n}\n\n.card:nth-child(6):hover .discord {\n fill: white;\n}\n\n.card:nth-child(7):hover {\n background-color: black;\n}\n\n.card:nth-child(7):hover .github {\n fill: white;\n}\n\n.card:nth-child(8):hover {\n background-color: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(1) {\n fill: white;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(2) {\n fill: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(3) {\n fill: #29b6f6;\n}\n\n.card:nth-child(9):hover {\n background-color: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g circle {\n fill: rgb(255,69,0);\n}\n\n.card:nth-child(9) .reddit > g path {\n fill: white;\n}\n\n.text {\n position: absolute;\n font-size: 0.7em;\n transition: .4s ease-in-out;\n color: black;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.33em;\n z-index: 3;\n}"}]}},"actionData":null,"errors":null}