diff --git a/content/download/platforms/linux.json b/content/download/platforms/linux.json
@@ -0,0 +1,5 @@
+{
+    "title": "Linux",
+    "userAgent": "X11",
+    "sort": 2
+}
diff --git a/content/download/platforms/macos.json b/content/download/platforms/macos.json
@@ -0,0 +1,5 @@
+{
+    "title": "macOS",
+    "userAgent": "Mac",
+    "sort": 1
+}
diff --git a/content/download/platforms/raspberry-pi.json b/content/download/platforms/raspberry-pi.json
@@ -0,0 +1,5 @@
+{
+    "title": "Raspberry Pi",
+    "sort": 3,
+    "assets": "linux"
+}
diff --git a/content/download/platforms/windows.json b/content/download/platforms/windows.json
@@ -0,0 +1,5 @@
+{
+    "title": "Windows",
+    "userAgent": "Windows",
+    "sort": 0
+}
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -374,6 +374,19 @@ async function createDownloadAndReleases(actions, graphql) {
             selectedPreReleases
           }
         }
+        platforms: allFile(
+          filter: {
+            sourceInstanceName: { eq: "download" }
+            relativeDirectory: { eq: "platforms" }
+          }
+        ) {
+          nodes {
+            name
+            childJson {
+              title
+            }
+          }
+        }
       }
     `
   );
@@ -392,6 +405,17 @@ async function createDownloadAndReleases(actions, graphql) {
       selectedPreReleases
     }
   });
+  for (const platform of result.data.platforms.nodes) {
+    createPage({
+      path: `/download/${platform.name}`,
+      component: downloadTemplate,
+      context: {
+        selectedReleases,
+        selectedPreReleases,
+        os: platform.childJson.title
+      }
+    });
+  }
   createPage({
     path: '/releases',
     component: releasesTemplate,

diff --git a/i18n/react-intl/en.json b/i18n/react-intl/en.json
@@ -157,6 +157,10 @@
   "donateCryptoInfo": "To donate using crypto, DAF, or stocks, visit our <strong><a href='https://www.every.org/processing-foundation?method=crypto,stocks,daf&success_url=https%3A%2F%2Fprocessing.org%2Fdonate&exit_url=https%3A%2F%2Fprocessing.org%2Fdonate&partner_metadata=eyJzb3VyY2UiOiAicHJvY2Vzc2luZy5vcmcifQ==#donate'>Every.org donation page</a></strong> instead.",
   "donateButton": "Donate",
   "donateHelp": "Help us continue with your generosity!",
+  "windows": "Windows",
+  "macos": "macOS",
+  "linux": "Linux",
+  "raspberry-pi": "Raspberry Pi",
   "moreExamples": "More Examples",
   "referenceTitle": "Reference",
   "Topic Examples": "Topic Examples",

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
@@ -9,6 +9,15 @@
   outline: none;
   border: none;
   cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  gap: var(--gutter-half);
+  align-items: center;
+  svg{
+    width: 1.5em;
+    height: 1.5em;
+    align-self: center;
+  }
 }
 
 .root:focus {
@@ -21,42 +30,65 @@
 }
 
 /*  Variant: Animate1 & Animate2 */
+.dark {
+  background-color: var(--white);
+  color: var(--processing-blue-dark);
+}
+.outline{
+  background-color: transparent;
+  color: var(--white);
+  border: 2px solid var(--white);
+}
 
 .animate1,
-.animate2 {
+.animate2,
+.dark,
+.outline {
   position: relative;
+  &:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: all 0.3s;
+    z-index: -1;
+    background-color: var(--processing-blue-light);
+    transform: translate(-3px, 3px);
+  }
+  &:hover::before {
+    transform: translate(3px, -3px);
+  }
+  &.large::before {
+    transform: translate(-5px, 5px);
+  }
+  &.large:hover::before {
+    transform: translate(5px, -5px);
+  }
 }
-
-.animate1::before,
-.animate2::before,
-.animate2::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.3s;
-  z-index: -1;
-  background-color: var(--processing-blue-light);
-  transform: translate(-3px, 3px);
+.dark::before{
+  background-color: var(--white);
+  opacity: 0.25;
 }
-
-.animate1:hover::before,
-.animate2:hover::before {
-  transform: translate(3px, -3px);
-  color: white;
+.dark:hover{
+  color: var(--processing-blue-dark);
 }
-
-.animate1.large::before,
-.animate2.large::before {
-  transform: translate(-5px, 5px);
+.dark:focus{
+  background-color: var(--white);
+  color: var(--processing-blue-dark);
 }
-
-.animate1.large:hover::before,
-.animate2.large:hover::before {
-  transform: translate(5px, -5px);
+.outline::before{
+  background: none;
+  border: 2px solid var(--white);
+  clip-path: inset(4px 4px 0px 0px);
 }
+.outline:hover::before{
+  background: none;
+  border: 2px solid var(--white);
+  clip-path: inset(0px 0px 4px 4px);
+}
+
 
 /*  Variant: Animate2  */
 
@@ -70,14 +102,6 @@
   color: white;
 }
 
-.animate2.large::after {
-  transform: translate(5px, -5px);
-}
-
-.animate2.large:hover::after {
-  transform: translate(-5px, 5px);
-}
-
 /*  Variant: Gray  */
 
 .gray {

diff --git a/src/components/Header.module.css b/src/components/Header.module.css
@@ -8,13 +8,4 @@
 
 .root h1 {
   margin: 0;
-}
-
-.root a {
-  color: inherit;
-  text-decoration: none;
-
-  &:focus {
-    color: var(--processing-blue-dark);
-  }
 }