Neo Icon Button

[{"id":"80e65b60-7e76-4c9c-887d-e618ba480934","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"89ba566d-5450-477c-ba09-c6f5edcf5f7e","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button-container {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n padding: 20px;\\n}\\n\\n.brutalist-button {\\n width: 130px;\\n height: 130px;\\n padding: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n\\n position: relative;\\n overflow: hidden;\\n\\n border: 3px solid #000000;\\n border-radius: 12px;\\n background: #1877f2;\\n color: #000000;\\n box-shadow: 4px 4px 0 #000000;\\n\\n cursor: pointer;\\n font-weight: bold;\\n text-decoration: none;\\n\\n transition:\\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.brutalist-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n left: 50%;\\n bottom: -150%;\\n z-index: 1;\\n\\n width: 300%;\\n height: 300%;\\n\\n border-radius: 50%;\\n background: #0d5fd7;\\n\\n transform: translateX(-50%) scale(0);\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.brutalist-button:hover::before {\\n transform: translateX(-50%) scale(1);\\n}\\n\\n.brutalist-button:hover {\\n transform: translate(-4px, -4px);\\n box-shadow: 8px 8px 0 #000000;\\n}\\n\\n.brutalist-button:active {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px 0 #000000;\\n}\\n\\n.facebook-logo {\\n width: 90px;\\n height: 90px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n z-index: 2;\\n\\n border-radius: 50%;\\n background: #ffffff;\\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\\n\\n transform: translate(-50%, -50%) rotate(0deg);\\n\\n transition:\\n width 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n height 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n top 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.facebook-icon {\\n width: 54px;\\n height: 54px;\\n transform: scale(1);\\n\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.facebook-icon path {\\n fill: #1877f2;\\n}\\n\\n.brutalist-button:hover .facebook-logo {\\n width: 50px;\\n height: 50px;\\n top: 28%;\\n transform: translate(-50%, -50%) rotate(360deg);\\n}\\n\\n.brutalist-button:hover .facebook-icon {\\n transform: scale(0.6);\\n}\\n\\n.button-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 18px;\\n z-index: 2;\\n\\n text-align: center;\\n line-height: 1.3;\\n color: #ffffff;\\n\\n opacity: 0;\\n transform: translateY(20px);\\n\\n transition:\\n opacity 0.45s ease,\\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.button-text span:first-child {\\n margin-bottom: 2px;\\n font-size: 13px;\\n font-weight: 500;\\n}\\n\\n.button-text span:last-child {\\n color: #ffffff;\\n font-size: 16px;\\n font-weight: 800;\\n letter-spacing: 0.8px;\\n text-transform: uppercase;\\n}\\n\\n.brutalist-button:hover .button-text {\\n opacity: 1;\\n transform: translateY(0);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Neo Icon Button\\n \\n \\n \\n

\\n

\\n \\n

\\n

\\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"9ae838d2-6a98-4d72-b817-3b1de84d8bb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0363d64d-2bd5-428d-904a-0a49a7c4d999","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"58f16460-acf1-4198-bce9-010aee44bc5e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b41d7953-fa8a-437d-8e6a-7ed454948bb1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"66a6c929-fb56-4bb4-84a0-ef549983093b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button-container {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n padding: 20px;\\n}\\n\\n.brutalist-button {\\n width: 130px;\\n height: 130px;\\n padding: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n\\n position: relative;\\n overflow: hidden;\\n\\n border: 3px solid #000000;\\n border-radius: 12px;\\n background: #1877f2;\\n color: #000000;\\n box-shadow: 4px 4px 0 #000000;\\n\\n cursor: pointer;\\n font-weight: bold;\\n text-decoration: none;\\n\\n transition:\\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.brutalist-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n left: 50%;\\n bottom: -150%;\\n z-index: 1;\\n\\n width: 300%;\\n height: 300%;\\n\\n border-radius: 50%;\\n background: #0d5fd7;\\n\\n transform: translateX(-50%) scale(0);\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.brutalist-button:hover::before {\\n transform: translateX(-50%) scale(1);\\n}\\n\\n.brutalist-button:hover {\\n transform: translate(-4px, -4px);\\n box-shadow: 8px 8px 0 #000000;\\n}\\n\\n.brutalist-button:active {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px 0 #000000;\\n}\\n\\n.facebook-logo {\\n width: 90px;\\n height: 90px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n z-index: 2;\\n\\n border-radius: 50%;\\n background: #ffffff;\\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\\n\\n transform: translate(-50%, -50%) rotate(0deg);\\n\\n transition:\\n width 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n height 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n top 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.facebook-icon {\\n width: 54px;\\n height: 54px;\\n transform: scale(1);\\n\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.facebook-icon path {\\n fill: #1877f2;\\n}\\n\\n.brutalist-button:hover .facebook-logo {\\n width: 50px;\\n height: 50px;\\n top: 28%;\\n transform: translate(-50%, -50%) rotate(360deg);\\n}\\n\\n.brutalist-button:hover .facebook-icon {\\n transform: scale(0.6);\\n}\\n\\n.button-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 18px;\\n z-index: 2;\\n\\n text-align: center;\\n line-height: 1.3;\\n color: #ffffff;\\n\\n opacity: 0;\\n transform: translateY(20px);\\n\\n transition:\\n opacity 0.45s ease,\\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.button-text span:first-child {\\n margin-bottom: 2px;\\n font-size: 13px;\\n font-weight: 500;\\n}\\n\\n.button-text span:last-child {\\n color: #ffffff;\\n font-size: 16px;\\n font-weight: 800;\\n letter-spacing: 0.8px;\\n text-transform: uppercase;\\n}\\n\\n.brutalist-button:hover .button-text {\\n opacity: 1;\\n transform: translateY(0);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"588adfa4-c786-40e4-ad96-36587d33e8cf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"c1e8f39f-ad1f-4273-ba12-435535f6665d","type":"divider","props":{},"children":[]},{"id":"df9f167f-5d6d-43e8-9a33-7bc2043c6b8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"bbeffcca-4aa6-40f7-9abc-92a22965bbdc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"825abb99-c1ee-4c2f-a2e0-00c32b33d10d","type":"procode","props":{"code":".brutalist-button {\n width: 130px;\n height: 130px;\n padding: 0;\n\n border: 3px solid #000000;\n border-radius: 12px;\n background: #1877f2;\n color: #000000;\n box-shadow: 4px 4px 0 #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ya0jdp3gl\",\"name\":\"code\",\"code\":\".brutalist-button {\\n width: 130px;\\n height: 130px;\\n padding: 0;\\n\\n border: 3px solid #000000;\\n border-radius: 12px;\\n background: #1877f2;\\n color: #000000;\\n box-shadow: 4px 4px 0 #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12434212-25bb-4ad4-897d-853ce9cf0559","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the center.","styles":{}}],"children":[]},{"id":"832385fb-0aa4-4cc3-a027-784947f56b9a","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dd3emla6q\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"198857a9-c10f-4ad1-8c76-c3e1afc48e7b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Container\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-container","styles":{"code":true}},{"type":"text","text":" uses Flexbox. In this version, it only contains one button, but the layout supports multiple buttons with spacing.","styles":{}}],"children":[]},{"id":"2b8abb9a-5c6b-4154-ab8a-a10ebd35ccc4","type":"procode","props":{"code":".button-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n padding: 20px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"eh74s1cek\",\"name\":\"code\",\"code\":\".button-container {\\n display: flex;\\n justify-content: center;\\n gap: 20px;\\n padding: 20px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"975106bb-e8c3-4672-b249-3b0900697264","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The button is a square card. It uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" so the circular hover fill can stay inside the button.","styles":{}}],"children":[]},{"id":"5301ea83-85b8-455c-ad1b-fc178e3b06f9","type":"procode","props":{"code":".brutalist-button {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n position: relative;\n overflow: hidden;\n\n cursor: pointer;\n font-weight: bold;\n text-decoration: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"prqnm463m\",\"name\":\"code\",\"code\":\".brutalist-button {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n\\n position: relative;\\n overflow: hidden;\\n\\n cursor: pointer;\\n font-weight: bold;\\n text-decoration: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5a44a3dd-9065-4c96-8048-1a6cd9496810","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Setup\n","styles":{"bold":true}},{"type":"text","text":"The blue hover fill is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":". It starts as a large circle placed below the button and scaled down to ","styles":{}},{"type":"text","text":"0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"d79df378-e6ea-4a21-a6f0-98b716940dea","type":"procode","props":{"code":".brutalist-button::before {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: -150%;\n z-index: 1;\n\n width: 300%;\n height: 300%;\n\n border-radius: 50%;\n background: #0d5fd7;\n\n transform: translateX(-50%) scale(0);\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"m4sl25sa5\",\"name\":\"code\",\"code\":\".brutalist-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n left: 50%;\\n bottom: -150%;\\n z-index: 1;\\n\\n width: 300%;\\n height: 300%;\\n\\n border-radius: 50%;\\n background: #0d5fd7;\\n\\n transform: translateX(-50%) scale(0);\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e2de3615-a775-4921-9035-a209ac14cd50","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Animation\n","styles":{"bold":true}},{"type":"text","text":"On hover, the large circle scales to ","styles":{}},{"type":"text","text":"1","styles":{"code":true}},{"type":"text","text":". Because the button has ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":", the circle fills the inside of the button smoothly.","styles":{}}],"children":[]},{"id":"db18efe0-d56d-46ac-b6ad-9e629748ced8","type":"procode","props":{"code":".brutalist-button:hover::before {\n transform: translateX(-50%) scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"700n5aklp\",\"name\":\"code\",\"code\":\".brutalist-button:hover::before {\\n transform: translateX(-50%) scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a2a73248-7e0b-457c-985e-dba5fa7feaf4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Hover Lift\n","styles":{"bold":true}},{"type":"text","text":"On hover, the whole button moves up-left and the black shadow becomes larger. This creates a stronger brutalist lift effect.","styles":{}}],"children":[]},{"id":"f39f5ad8-fab1-4b66-b7ff-384b622f8f04","type":"procode","props":{"code":".brutalist-button:hover {\n transform: translate(-4px, -4px);\n box-shadow: 8px 8px 0 #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tsq7dn6jc\",\"name\":\"code\",\"code\":\".brutalist-button:hover {\\n transform: translate(-4px, -4px);\\n box-shadow: 8px 8px 0 #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"905a8fc0-e306-4b6f-a125-f28eda5e612b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Clicked Feel\n","styles":{"bold":true}},{"type":"text","text":"On click, the button moves down-right and the shadow becomes smaller. This makes the button feel physically pressed.","styles":{}}],"children":[]},{"id":"592404aa-d4c2-45ca-905e-19db1cab04a5","type":"procode","props":{"code":".brutalist-button:active {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0 #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e00ei40os\",\"name\":\"code\",\"code\":\".brutalist-button:active {\\n transform: translate(2px, 2px);\\n box-shadow: 2px 2px 0 #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d820cdf-eed1-4699-a09e-0ecd1b1ea297","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Facebook Logo Circle\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".facebook-logo","styles":{"code":true}},{"type":"text","text":" is the white circle in the center. It is absolutely centered using ","styles":{}},{"type":"text","text":"top: 50%","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"left: 50%","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"translate(-50%, -50%)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"06e9392d-fffb-447e-9fbe-fe122e2463cf","type":"procode","props":{"code":".facebook-logo {\n width: 90px;\n height: 90px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 2;\n\n border-radius: 50%;\n background: #ffffff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n\n transform: translate(-50%, -50%) rotate(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"c44eho48h\",\"name\":\"code\",\"code\":\".facebook-logo {\\n width: 90px;\\n height: 90px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n z-index: 2;\\n\\n border-radius: 50%;\\n background: #ffffff;\\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\\n\\n transform: translate(-50%, -50%) rotate(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08e2cf65-079a-40a0-9835-8c55f3d776be","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Facebook Logo Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the logo circle becomes smaller, moves upward, and rotates ","styles":{}},{"type":"text","text":"360deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4c077d5e-0d6d-4b33-9dca-a8beb6c06917","type":"procode","props":{"code":".brutalist-button:hover .facebook-logo {\n width: 50px;\n height: 50px;\n top: 28%;\n transform: translate(-50%, -50%) rotate(360deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"bk6xgxzfe\",\"name\":\"code\",\"code\":\".brutalist-button:hover .facebook-logo {\\n width: 50px;\\n height: 50px;\\n top: 28%;\\n transform: translate(-50%, -50%) rotate(360deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5eb96253-0cdd-4ee8-9557-ca68ca9f18f9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Facebook Icon\n","styles":{"bold":true}},{"type":"text","text":"The Facebook SVG starts large inside the white circle. Its path uses Facebook blue.","styles":{}}],"children":[]},{"id":"f88c8d95-ea43-4fee-846c-85f7fa605d19","type":"procode","props":{"code":".facebook-icon {\n width: 54px;\n height: 54px;\n transform: scale(1);\n}\n\n.facebook-icon path {\n fill: #1877f2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2d06p1xv0\",\"name\":\"code\",\"code\":\".facebook-icon {\\n width: 54px;\\n height: 54px;\\n transform: scale(1);\\n}\\n\\n.facebook-icon path {\\n fill: #1877f2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df1e4a05-f40a-418d-9cbb-8ad1197a03f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Facebook Icon Hover\n","styles":{"bold":true}},{"type":"text","text":"When the button is hovered, the icon scales down to match the smaller logo circle.","styles":{}}],"children":[]},{"id":"e9a5f318-3b7e-48ea-80c9-edd1863768d6","type":"procode","props":{"code":".brutalist-button:hover .facebook-icon {\n transform: scale(0.6);\n}","language":"javascript","filename":"","files":"[{\"id\":\"l9wood0mz\",\"name\":\"code\",\"code\":\".brutalist-button:hover .facebook-icon {\\n transform: scale(0.6);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4df7568d-e2f5-4f45-910c-039eb6e972ce","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The text starts hidden below the logo. It uses ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"translateY(20px)","styles":{"code":true}},{"type":"text","text":" so it can slide upward on hover.","styles":{}}],"children":[]},{"id":"87a89e28-d17d-4f42-9dce-312fa800d201","type":"procode","props":{"code":".button-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n position: absolute;\n left: 0;\n right: 0;\n bottom: 18px;\n z-index: 2;\n\n text-align: center;\n line-height: 1.3;\n color: #ffffff;\n\n opacity: 0;\n transform: translateY(20px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"97v2s78nr\",\"name\":\"code\",\"code\":\".button-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 18px;\\n z-index: 2;\\n\\n text-align: center;\\n line-height: 1.3;\\n color: #ffffff;\\n\\n opacity: 0;\\n transform: translateY(20px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f3db735a-1eb9-47bd-a8d7-887828b9abc8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Text Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text fades in and moves into place.","styles":{}}],"children":[]},{"id":"d9ff1352-4d0a-44b0-a7b4-75e0fc2e2c7b","type":"procode","props":{"code":".brutalist-button:hover .button-text {\n opacity: 1;\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"twa7ctblj\",\"name\":\"code\",\"code\":\".brutalist-button:hover .button-text {\\n opacity: 1;\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"777be824-5b34-49a0-a3b4-b0f94ee77432","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Styling\n","styles":{"bold":true}},{"type":"text","text":"The first line is smaller and lighter. The second line is larger, bold, uppercase, and spaced out.","styles":{}}],"children":[]},{"id":"c9ec36a1-9d8c-4705-bcf3-ca2e41938c39","type":"procode","props":{"code":".button-text span:first-child {\n margin-bottom: 2px;\n font-size: 13px;\n font-weight: 500;\n}\n\n.button-text span:last-child {\n color: #ffffff;\n font-size: 16px;\n font-weight: 800;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bryi15av6\",\"name\":\"code\",\"code\":\".button-text span:first-child {\\n margin-bottom: 2px;\\n font-size: 13px;\\n font-weight: 500;\\n}\\n\\n.button-text span:last-child {\\n color: #ffffff;\\n font-size: 16px;\\n font-weight: 800;\\n letter-spacing: 0.8px;\\n text-transform: uppercase;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72288558-d2ad-4601-9048-7247a9fdcce3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The background circle fills the button, the logo moves upward and rotates, and the text appears from the bottom.","styles":{}}],"children":[]},{"id":"b235a646-ae85-4bdb-99ee-38a56ffce077","type":"procode","props":{"code":".brutalist-button:hover::before {\n transform: translateX(-50%) scale(1);\n}\n\n.brutalist-button:hover .facebook-logo {\n width: 50px;\n height: 50px;\n top: 28%;\n transform: translate(-50%, -50%) rotate(360deg);\n}\n\n.brutalist-button:hover .button-text {\n opacity: 1;\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3bc82zmch\",\"name\":\"code\",\"code\":\".brutalist-button:hover::before {\\n transform: translateX(-50%) scale(1);\\n}\\n\\n.brutalist-button:hover .facebook-logo {\\n width: 50px;\\n height: 50px;\\n top: 28%;\\n transform: translate(-50%, -50%) rotate(360deg);\\n}\\n\\n.brutalist-button:hover .button-text {\\n opacity: 1;\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50e07c46-c92e-43a0-8bd7-b32370d5e9d2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layering / Z-Index\n","styles":{"bold":true}},{"type":"text","text":"The hover fill uses ","styles":{}},{"type":"text","text":"z-index: 1","styles":{"code":true}},{"type":"text","text":", while the logo and text use ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":". This keeps the content above the animated background.","styles":{}}],"children":[]},{"id":"19a7ce15-3bf4-4e53-868f-437144c958eb","type":"procode","props":{"code":".brutalist-button::before {\n z-index: 1;\n}\n\n.facebook-logo,\n.button-text {\n z-index: 2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xbla31fot\",\"name\":\"code\",\"code\":\".brutalist-button::before {\\n z-index: 1;\\n}\\n\\n.facebook-logo,\\n.button-text {\\n z-index: 2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae105c0d-66f0-45b7-8e98-b36c7a8ad0fe","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button lift, logo movement, icon scale, fill circle, and text reveal all use transitions. The cubic-bezier curve makes the hover animation feel smooth and snappy.","styles":{}}],"children":[]},{"id":"a53e2c42-c407-440f-8ec0-cc8896a4031f","type":"procode","props":{"code":".brutalist-button {\n transition:\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.brutalist-button::before {\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.facebook-logo {\n transition:\n width 0.65s cubic-bezier(0.22, 1, 0.36, 1),\n height 0.65s cubic-bezier(0.22, 1, 0.36, 1),\n top 0.65s cubic-bezier(0.22, 1, 0.36, 1),\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"o4vh5vs32\",\"name\":\"code\",\"code\":\".brutalist-button {\\n transition:\\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.brutalist-button::before {\\n transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.facebook-logo {\\n transition:\\n width 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n height 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n top 0.65s cubic-bezier(0.22, 1, 0.36, 1),\\n transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b2b89900-5cfb-4802-9f9d-6385d51d9e7b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the button lift speed here:","styles":{}}],"children":[]},{"id":"7d63f3a7-78e7-417d-8e77-5833311bfa65","type":"procode","props":{"code":".brutalist-button {\n transition:\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zitutq4u4\",\"name\":\"code\",\"code\":\".brutalist-button {\\n transition:\\n transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),\\n box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60e2f4fe-1aa8-475b-91aa-4fef49184af6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the fill and logo animation speed here:","styles":{}}],"children":[]},{"id":"6b31527e-3057-487b-8e70-8596d450d057","type":"procode","props":{"code":".brutalist-button::before,\n.facebook-logo,\n.facebook-icon {\n transition-duration: 0.65s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m8t0sqog9\",\"name\":\"code\",\"code\":\".brutalist-button::before,\\n.facebook-logo,\\n.facebook-icon {\\n transition-duration: 0.65s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b30f890-8f71-4c93-abe7-18fdea7883f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the main button blue here:","styles":{}}],"children":[]},{"id":"38304aeb-5975-4655-bc78-7b30570a6dff","type":"procode","props":{"code":".brutalist-button {\n background: #1877f2;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jrl67ggz6\",\"name\":\"code\",\"code\":\".brutalist-button {\\n background: #1877f2;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1cf1cb83-767e-40a6-a4a8-c4994259bb75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover fill blue here:","styles":{}}],"children":[]},{"id":"27fa2f8c-a7f8-4380-9755-9cdcd1f0fba8","type":"procode","props":{"code":".brutalist-button::before {\n background: #0d5fd7;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kee5xuk62\",\"name\":\"code\",\"code\":\".brutalist-button::before {\\n background: #0d5fd7;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d20d8725-deec-41ad-93d5-294b454e03a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the border and hard shadow color here:","styles":{}}],"children":[]},{"id":"b49d64eb-3939-4e39-8f6f-a627cb496dd5","type":"procode","props":{"code":".brutalist-button {\n border: 3px solid #000000;\n box-shadow: 4px 4px 0 #000000;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vsdscnk5c\",\"name\":\"code\",\"code\":\".brutalist-button {\\n border: 3px solid #000000;\\n box-shadow: 4px 4px 0 #000000;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"46a9ef75-b09b-4cfb-bd2d-2e986ead1e38","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the button size here:","styles":{}}],"children":[]},{"id":"202c220a-27fc-49ae-969d-7dad157f6ac7","type":"procode","props":{"code":".brutalist-button {\n width: 130px;\n height: 130px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ax8vq2dvt\",\"name\":\"code\",\"code\":\".brutalist-button {\\n width: 130px;\\n height: 130px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce6ddf8f-2bda-445e-a260-f1bb48234a1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the button radius here:","styles":{}}],"children":[]},{"id":"d59e8c25-e781-4713-9ca5-a7ac9123903f","type":"procode","props":{"code":".brutalist-button {\n border-radius: 12px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"b28ds1gre\",\"name\":\"code\",\"code\":\".brutalist-button {\\n border-radius: 12px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"15676eb7-f9ad-40da-adc5-64cb4a43cafa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the logo circle size here:","styles":{}}],"children":[]},{"id":"276aa90b-09e6-4256-aa6f-e6b97df3ccb6","type":"procode","props":{"code":".facebook-logo {\n width: 90px;\n height: 90px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7uv31dqyx\",\"name\":\"code\",\"code\":\".facebook-logo {\\n width: 90px;\\n height: 90px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d53bc16-a2b4-4efe-8722-b454fa14d43e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the hover logo size here:","styles":{}}],"children":[]},{"id":"9892642f-a1eb-433a-b520-ca4037212010","type":"procode","props":{"code":".brutalist-button:hover .facebook-logo {\n width: 50px;\n height: 50px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z4zsye8n6\",\"name\":\"code\",\"code\":\".brutalist-button:hover .facebook-logo {\\n width: 50px;\\n height: 50px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"628298f7-f581-4d60-b8a5-12e539ad6d09","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"cb7c85a6-fbe8-4f97-b16c-b57dca57995c","type":"procode","props":{"code":"

\n Follow On\n Facebook\n

","language":"javascript","filename":"","files":"[{\"id\":\"o7udy3ii3\",\"name\":\"code\",\"code\":\"

\\n Follow On\\n Facebook\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66311177-a75d-401f-898e-d6c17397427a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]