diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index d2c8cd0147..945177d8b1 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -1,4 +1,7 @@
 @use 'reset';
+
+@use 'anchor';
 @use 'body';
-@use 'heading';
+@use 'button';
 @use 'fieldset-legend';
+@use 'heading';
diff --git a/packages/styles/src/elements/anchor.scss b/packages/styles/src/elements/anchor.scss
new file mode 100644
index 0000000000..b80227b1df
--- /dev/null
+++ b/packages/styles/src/elements/anchor.scss
@@ -0,0 +1,34 @@
+// @use '../tokens/elements';
+@use '../functions/tokens';
+
+$post-avatar: (
+  'post-avatar-size': 2.5rem,
+  'post-avatar-bg': #050400,
+  'post-avatar-fg': #fff,
+  'post-avatar-border-width': 2px,
+  'post-avatar-border-color': #fff,
+  'post-avatar-border-radius': 50%,
+  'post-avatar-font-size': 16px,
+  'post-avatar-hover-bg': #666,
+  'post-avatar-hover-fg': white,
+  'post-avatar-hover-bg-img-overlay': #ffffff77,
+  'post-avatar-focus-outline-width': 2px,
+  'post-avatar-focus-outline-color': #000,
+  'post-avatar-focus-outline-offset': 2px,
+);
+
+a {
+  &:hover {
+    post-avatar {
+      --post-avatar-bg: #{tokens.get('avatar-hover-bg', $post-avatar)};
+      --post-avatar-fg: #{tokens.get('avatar-hover-fg', $post-avatar)};
+      --post-avatar-bg-img-overlay: #{tokens.get('avatar-hover-bg-img-overlay', $post-avatar)};
+    }
+  }
+
+  &:has(post-avatar:only-child) {
+    display: inline-flex;
+    border-radius: tokens.get('avatar-border-radius', $post-avatar);
+    text-decoration: none;
+  }
+}
diff --git a/packages/styles/src/elements/button.scss b/packages/styles/src/elements/button.scss
new file mode 100644
index 0000000000..cac79d50bb
--- /dev/null
+++ b/packages/styles/src/elements/button.scss
@@ -0,0 +1,35 @@
+// @use '../tokens/elements';
+@use '../functions/tokens';
+
+$post-avatar: (
+  'post-avatar-size': 2.5rem,
+  'post-avatar-bg': #050400,
+  'post-avatar-fg': #fff,
+  'post-avatar-border-width': 2px,
+  'post-avatar-border-color': #fff,
+  'post-avatar-border-radius': 50%,
+  'post-avatar-font-size': 16px,
+  'post-avatar-hover-bg': #666,
+  'post-avatar-hover-fg': white,
+  'post-avatar-hover-bg-img-overlay': #ffffff77,
+  'post-avatar-focus-outline-width': 2px,
+  'post-avatar-focus-outline-color': #000,
+  'post-avatar-focus-outline-offset': 2px,
+);
+
+button {
+  &:hover {
+    post-avatar {
+      --post-avatar-bg: #{tokens.get('avatar-hover-bg', $post-avatar)};
+      --post-avatar-fg: #{tokens.get('avatar-hover-fg', $post-avatar)};
+      --post-avatar-bg-img-overlay: #{tokens.get('avatar-hover-bg-img-overlay', $post-avatar)};
+    }
+  }
+
+  &:has(post-avatar:only-child) {
+    padding: 0;
+    background-color: transparent;
+    border: 0 none;
+    border-radius: tokens.get('avatar-border-radius', $post-avatar);
+  }
+}