diff --git a/docs/_data/buttons.json b/docs/_data/buttons.json
index 2671f20255..dae9a16333 100755
--- a/docs/_data/buttons.json
+++ b/docs/_data/buttons.json
@@ -187,6 +187,61 @@
       ]
     }
   ],
+  "anchor": [
+    {
+      "title": "Anchors",
+      "classes": [
+        {
+          "title": "Secondary, Clear"
+        },
+        {
+          "title": "Secondary, Outlined",
+          "class": "s-btn__outlined"
+        },
+        {
+          "title": "Secondary, Filled",
+          "class": "s-btn__filled"
+        },
+        {
+          "title": "Danger, Clear",
+          "class": "s-btn__danger"
+        },
+        {
+          "title": "Danger, Outlined",
+          "class": "s-btn__danger",
+          "class2": "s-btn__outlined"
+        },
+        {
+          "title": "Danger, Filled",
+          "class": "s-btn__danger",
+          "class2": "s-btn__filled"
+        },
+        {
+          "title": "Featured, Clear",
+          "class": "s-btn__featured"
+        },
+        {
+          "title": "Featured, Outlined",
+          "class": "s-btn__featured",
+          "class2": "s-btn__outlined"
+        },
+        {
+          "title": "Featured, Filled",
+          "class": "s-btn__featured",
+          "class2": "s-btn__filled"
+        },
+        {
+          "title": "Muted, Clear",
+          "class": "s-btn__muted"
+        },
+        {
+          "title": "Muted, Outlined",
+          "class": "s-btn__muted",
+          "class2": "s-btn__outlined"
+        }
+      ]
+    }
+  ],
   "badges": [
     {
       "title": "Badge",
diff --git a/docs/product/components/buttons.html b/docs/product/components/buttons.html
index 0d55cda472..c788608fac 100644
--- a/docs/product/components/buttons.html
+++ b/docs/product/components/buttons.html
@@ -237,6 +237,60 @@
     </div>
 </section>
 
+
+<section class="stacks-section">
+    {% header "h2", "Anchors" %}
+    <p class="stacks-copy">Anchors can be rendered with the <code class="stacks-code">.s-btn</code> to adopt a button-like visual style for a link.</p>
+
+    <div class="stacks-preview">
+{% highlight html %}
+<a href="#" class="s-btn">Ask question</a>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="overflow-x-auto">
+                <table class="wmn5 s-table s-table__bx-simple">
+                    <thead>
+                        <tr>
+                            <th scope="col">Type</th>
+                            <th scope="col" class="s-table--cell4">Class</th>
+                            <th scope="col" class="ta-center">Default State</th>
+                            <th scope="col" class="ta-center">Selected State</th>
+                            <th scope="col" class="ta-center">Disabled State</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for btn in buttons.anchor %}
+                            {% assign types = btn.classes %}
+                            {% for class in types %}
+                            <tr>
+                                <th scope="row" class="va-middle">{{ class.title }}</th>
+                                <td class="va-middle">
+                                    <div class="d-flex g4 fw-wrap">
+                                        <code class="flex--item stacks-code">.s-btn</code>
+                                        {% if class.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ class.class }}</code>
+                                        {% endif %}
+                                        {% if class.class2 != nil %}
+                                            <code class="flex--item stacks-code">.{{ class.class2 }}</code>
+                                        {% endif %}
+                                        {% if btn.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ btn.class }}</code>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                                <td class="va-middle ta-center px4"><a href="#" class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %}">Ask question</a></td>
+                                <td class="va-middle ta-center px4"><a href="#" class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %} is-selected" aria-pressed="true">Ask question</a></td>
+                                <td class="va-middle ta-center px4"><a href="#" class="ws-nowrap s-btn {{ class.class }} {% if class.class2 %}{{ class.class2 }}{% endif %}" disabled>Ask question</a></td>
+                            </tr>
+                            {% endfor %}
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
+
 <section class="stacks-section">
     {% header "h2", "Loading" %}
     <p class="stacks-copy">Any button can have a loading state applied by adding the <code class="stacks-code">.is-loading</code> state class.</p>
diff --git a/lib/components/button/button.less b/lib/components/button/button.less
index 5cca3ff20a..e5be59c59d 100644
--- a/lib/components/button/button.less
+++ b/lib/components/button/button.less
@@ -441,13 +441,13 @@
             }
 
             &:visited:not(:active):not(:focus) {
-                &.s-btn__filled {
-                    background-color: var(--_bu-filled-bg);
-                    border-color: var(--_bu-filled-bc);
-                    color: var(--_bu-filled-fc);
-                }
-
                 &:not(.s-btn__outlined) {
+                    &.s-btn__filled {
+                        background-color: var(--_bu-filled-bg-hover);
+                        border-color: var(--_bu-filled-bc-hover);
+                        color: var(--_bu-filled-fc-hover);
+                    }
+
                     background-color: var(--_bu-bg);
                     border-color: var(--_bu-bc);
                     color: var(--_bu-fc);