diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 4213442c9..9fdab16ad 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -14,22 +14,27 @@ In this version, the button component has been refactored to use the Utrecht but
 In order to maintain the same style as in previous versions, the following Utrecht design tokens
 should be set:
 
-* `--utrecht-button-secondary-action-danger-background-color` takes the value of the old `--of-button-danger-bg`
-* `--utrecht-button-secondary-action-danger-color` takes the value of the old `--of-button-danger-fg`
-* `--utrecht-button-subtle-danger-background-color`  takes the value of `--of-color-danger`
-* `--utrecht-button-subtle-danger-hover-background-color` takes the value `--of-color-bg`
-* `--utrecht-button-subtle-danger-active-background-color` takes the value of the old `--of-button-danger-active-bg`
-* `--utrecht-button-disabled-color`. This does not take the value of an old token. For the
-  Open Forms theme this is now `#ffffff`.
-* `--utrecht-button-disabled-background-color`. This does not take the value of an old token,
+* ``--utrecht-button-primary-action-focus-border-color`` has ``#000000`` (black) in the Open Forms
+  theme.
+* ``--utrecht-button-primary-action-danger-focus-border-color`` has ``#000000`` (black) in the
+  Open Forms theme.
+* ``--utrecht-button-secondary-action-danger-background-color`` takes the value of the old ``--of-button-danger-bg``
+* ``--utrecht-button-secondary-action-danger-color`` takes the value of the old ``--of-button-danger-fg``
+* ``--utrecht-button-secondary-action-focus-border-color`` takes the value of the old ``--of-color-focus-border``
+* ``--utrecht-button-subtle-danger-background-color``  takes the value of ``--of-color-danger``
+* ``--utrecht-button-subtle-danger-hover-background-color`` takes the value ``--of-color-bg``
+* ``--utrecht-button-subtle-danger-active-background-color`` takes the value of the old ``--of-button-danger-active-bg``
+* ``--utrecht-button-disabled-color``. This does not take the value of an old token. For the
+  Open Forms theme this is now ``#ffffff``.
+* ``--utrecht-button-disabled-background-color``. This does not take the value of an old token,
   the colour was previously obtained by graying out the primary button. For the Open Forms theme,
-  this is now `#a02017`.
-* `--utrecht-action-disabled-cursor`. This does not take the value of an old token. It controls
+  this is now ``#a02017``.
+* ``--utrecht-action-disabled-cursor``. This does not take the value of an old token. It controls
   the looks of the cursor when hovering a disabled button. For the Open Forms theme, this is now
-  `not-allowed`.
-* `--utrecht-action-submit-cursor`. This does not take the value of an old token. It controls the
+  ``not-allowed``.
+* ``--utrecht-action-submit-cursor``. This does not take the value of an old token. It controls the
   looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now
-  `pointer`.
+  ``pointer``.
 
 
 1.6.0-alpha.0 (2023-10-02)
diff --git a/design-tokens b/design-tokens
index 22353ac0e..1fc3a5667 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 22353ac0e07bebbf4cd149bee2ec507e9e3401ca
+Subproject commit 1fc3a5667ed656c554624aefaaca3650fd0bf94a
diff --git a/package.json b/package.json
index 5ef7ee078..264d89e64 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.44.0",
+    "@open-formulieren/design-tokens": "^0.44.1",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
diff --git a/src/components/Button/Button.mdx b/src/components/Button/OFButton.mdx
similarity index 100%
rename from src/components/Button/Button.mdx
rename to src/components/Button/OFButton.mdx
diff --git a/src/components/Button/OFButton.stories.js b/src/components/Button/OFButton.stories.js
index b7b9da694..c242ccd26 100644
--- a/src/components/Button/OFButton.stories.js
+++ b/src/components/Button/OFButton.stories.js
@@ -64,6 +64,7 @@ export const UtrechtLinkLooksLikeDefaultButton = {
   args: {
     label: 'Default',
     component: UtrechtButtonLink,
+    href: '#',
   },
 };
 
@@ -72,6 +73,7 @@ export const UtrechtLinkLooksLikePrimaryButton = {
   args: {
     label: 'Primary',
     component: UtrechtButtonLink,
+    href: '#',
     appearance: 'primary-action-button',
   },
 };
@@ -81,6 +83,7 @@ export const UtrechtLinkLooksLikeSecondaryButton = {
   args: {
     label: 'Secondary',
     component: UtrechtButtonLink,
+    href: '#',
     appearance: 'secondary-action-button',
   },
 };
@@ -90,6 +93,7 @@ export const UtrechtLinkLooksLikeDangerButton = {
   args: {
     label: 'Danger',
     component: UtrechtButtonLink,
+    href: '#',
     appearance: 'primary-action-button',
     hint: 'danger',
   },
diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs
index 1a9903848..f8ab8125d 100644
--- a/src/formio/templates/editGrid.ejs
+++ b/src/formio/templates/editGrid.ejs
@@ -15,7 +15,7 @@
               </li>
               {% if (ctx.component.removeRow) { %}
                   <li class="{{ctx.ofPrefix}}toolbar__list-item">
-              <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              <button class="utrecht-button utrecht-button--primary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
                   </li>
               {% } %}
               </ul>
diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
index f60e3e359..c3c5b0c74 100644
--- a/src/formio/templates/editGridRow.ejs
+++ b/src/formio/templates/editGridRow.ejs
@@ -12,7 +12,7 @@
                 <button class="utrecht-button utrecht-button--secondary-action editRow"><i class="{{ ctx.iconClass('edit') }}"></i></button>
             </li>
             <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
+                <button class="utrecht-button utrecht-button--primary-action utrecht-button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
             </li>
         </ul>
     </div>
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 4b9e3a00f..90c0e05d1 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,12 +1,19 @@
-@use 'microscope-sass/lib/bem';
-
 @import '@utrecht/components/dist/button/css/index.css';
 @import '@utrecht/components/dist/button-link/css/index.css';
 
 .openforms-theme {
   .utrecht-button,
   .utrecht-button-link {
-    border-block-start-color: transparent !important;
-    border-inline-start-color: transparent !important;
+    // For buttons without any state or buttons being hovered over, apply a 3d effect
+    // by making the top and left border transparent.
+    &,
+    &:hover {
+      // However, if the button has visible focus, apply the border color to all borders
+      // otherwise it looks a bit broken.
+      &:not(:focus-visible) {
+        border-block-start-color: transparent;
+        border-inline-start-color: transparent;
+      }
+    }
   }
 }