diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
index 730d1e9e1e4..a24298cf625 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
@@ -6,9 +6,9 @@ order: 2
 
 import Tabs from 'Tags/Tabs'
 
-import FirstTabContent from 'Pages/uilib/components/button/first-tab-content'
-import SecondTabContent from 'Pages/uilib/components/button/second-tab-content'
-import ThirdTabContent from 'Pages/uilib/components/button/third-tab-content'
+import FirstTabContent from 'Pages/uilib/components/button/button-info'
+import SecondTabContent from 'Pages/uilib/components/button/button-properties'
+import ThirdTabContent from 'Pages/uilib/components/button/button-events'
 
 # Button
 
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
index d8f165e47b3..ae99868760d 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
@@ -5,7 +5,6 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import ComponentBox from '../../../../shared/inlineTags/ComponentBox'
-import Button from 'dnb-ui-lib/src/components/button'
 import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons'
 
 class Example extends PureComponent {
@@ -13,7 +12,6 @@ class Example extends PureComponent {
     alert('You clicked a button with a click function attached to it')
   }
   render() {
-    console.log('Example')
     return (
       <Fragment>
         <ComponentBox>
@@ -33,101 +31,133 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <div className="example-box">
-          <Button
-            text="Disabled primary button"
-            title="This is a button title"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Disabled secondary button"
-            variant="secondary"
-            title="This is a button title"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with icon"
-            title="This is a button title"
-            icon="chevron_right"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="tertiary"
-            text="Tertiary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="tertiary"
-            text="Tertiary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with href"
-            href="?no-cache=1"
-            title="This is a link"
-            icon_position="right"
-            icon="chevron_right"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            title="Disabled Icon only Button"
-            icon="calendar"
-            disabled
-          />
-          <Button title="Button with Icon only" icon="calendar" />
-          <Button
-            title="Default sized Button with medium Icon"
-            icon="calendar"
-            icon_size="medium"
-            size="default"
-          />
-          <Button
-            title="Button with custom, Secondary Icon only"
-            icon={question}
-          />
-          <p className="example-caption">Button with Icon only</p>
-        </div>
-        <div className="example-box">
-          <Button
-            variant="signal"
-            text="Signal Button (large size)"
-            size="large"
-            icon={Bell}
-            icon_size="medium" // medium is equalent to 24, but responsive
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="signal"
-            text="Disabled Signal Button"
-            icon={<Bell />}
-            icon_size="medium"
-            disabled
-          />
-        </div>
+        <ComponentBox>
+          {`
+<Button
+  text="Disabled primary button"
+  title="This is a button title"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Disabled secondary button"
+  variant="secondary"
+  title="This is a button title"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with icon"
+  title="This is a button title"
+  icon="chevron_right"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  variant="tertiary"
+  text="Tertiary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  variant="tertiary"
+  text="Tertiary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<>
+<Button
+  text="Primary button with href"
+  href="?no-cache=1"
+  title="This is a link"
+  icon_position="right"
+  icon="chevron_right"
+/>
+<Button
+  variant="secondary"
+  text="Secondary button with href"
+  href="?no-cache=1"
+  title="This is a link"
+  icon_position="left"
+  icon="chevron_left"
+/>
+</>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ question }}>
+          {`
+<>
+  <Button
+    title="Disabled Icon only Button"
+    icon="calendar"
+    disabled
+  />
+  <Button title="Button with Icon only" icon="calendar" />
+  <Button
+    title="Default sized Button with medium Icon"
+    icon="calendar"
+    icon_size="medium"
+    size="default"
+  />
+  <Button
+    title="Button with custom, Secondary Icon only"
+    icon={question}
+  />
+  <p className="example-caption">Button with Icon only</p>
+</>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ Bell }}>
+          {`
+<Button
+  variant="signal"
+  text="Signal Button (large size)"
+  size="large"
+  icon={Bell}
+  icon_size="medium" // medium is equalent to 24, but responsive
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ Bell }}>
+          {`
+<Button
+  variant="signal"
+  text="Disabled Signal Button"
+  icon={<Bell />}
+  icon_size="medium"
+  disabled
+/>
+          `}
+        </ComponentBox>
       </Fragment>
     )
   }
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/button-events.md
similarity index 100%
rename from packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/button/button-events.md
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/first-tab-content.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/button-info.md
similarity index 100%
rename from packages/dnb-design-system-portal/src/pages/uilib/components/button/first-tab-content.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/button/button-info.md
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/button-properties.md
similarity index 91%
rename from packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/button/button-properties.md
index ff36a08a0ba..161ab64c9e5 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/button-properties.md
@@ -18,9 +18,3 @@ draft: true
 | `class`         | _(optional)_ any extra modifying class.                                                                                                |
 | `attributes`    | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes.                                       |
 | `href`          | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
-
-## Events
-
-| Events     | Description                                   |
-| ---------- | --------------------------------------------- |
-| `on_click` | _(optional)_ will be called on a click event. |
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
index 30c27386dbf..fcc26a187d2 100644
--- a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
+++ b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
@@ -27,7 +27,7 @@ import dnbTheme from './themes/dnb-prism-theme'
 const prismStyle = css(dnbTheme)
 
 const Wrapper = styled.div`
-  /* empty */
+  margin-bottom: 2rem;
 `
 
 const CodeBlock = ({
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
index 29407682135..3e5fac22781 100644
--- a/packages/dnb-ui-lib/src/components/button/Button.js
+++ b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -187,7 +187,7 @@ export default class Button extends PureComponent {
       id,
       class_name,
       className,
-      href ? 'dnb-no-anchor-underline dnb-no-anchor-hover' : null
+      href ? '' : null // dnb-no-anchor-underline dnb-no-anchor-hover
     )
 
     const params = {
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index 99fcaf65cdc..5da11430b65 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -123,7 +123,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   variant="primary"
 >
   <a
-    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className dnb-no-anchor-underline dnb-no-anchor-hover"
+    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className"
     disabled="disabled"
     href="https://url"
     id="id"
@@ -216,6 +216,10 @@ exports[`Button scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+/*
+ * Anchor
+ *
+ */
 /*
  * Typography
  *
@@ -412,6 +416,17 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   .dnb-button--signal[disabled] {
     color: #b0b0b0;
     background-color: var(--color-signal-yellow-30); }
+
+a.dnb-button {
+  transition: none; }
+  a.dnb-button:hover {
+    color: inherit;
+    background-color: inherit;
+    border-bottom-width: 1px; }
+  a.dnb-button::before {
+    content: none; }
+  a.dnb-button::before {
+    transition: max-height 0.01s linear; }
 "
 `;
 
@@ -655,14 +670,13 @@ exports[`Button scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -757,6 +771,10 @@ exports[`Button scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
index ceec84717bb..c87e731f723 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
@@ -3,9 +3,6 @@
 *
 */
 
-// this one is needed, in case dont import "/themes/imports.scss" before
-// @import '../../../style/core/utilities.scss';
-
 @mixin buttonHover($color, $background-color) {
   @include hover(true) {
     color: $color;
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
index 9b32d3c7c08..465fb3514fc 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -50,9 +50,8 @@
       height: var(--button-icon-size);
     }
 
-    /* -1px because of the border width */
     @supports not (-ms-ime-align: auto) {
-      transform: translateY(calc(1px - 1px - var(--button-border-width)));
+      transform: translateY(-1px);
     }
   }
   &__text {
@@ -203,5 +202,13 @@
 
 // make sure we style an Anchor like a button
 a.dnb-button {
-  transition: none;
+  -webkit-appearance: none; // because we have "appearance: button" in reset.scss
+
+  // some correction
+  .dnb-button__icon {
+    transform: translateY(0);
+  }
+  .dnb-button__text {
+    transform: translateY(1px);
+  }
 }
diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss
index 4007e3e8579..180a3893afd 100644
--- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss
@@ -3,9 +3,6 @@
 *
 */
 
-// as long as we import "dnb-button-theme-ui" - we dont need also /themes/imports.scss
-// @import '../../../../style/themes/imports.scss';
-
 @import './dnb-button-theme-ui.scss';
 
 :root {
diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
index 82a41c907aa..5e9f646dc34 100644
--- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -123,3 +123,10 @@
     background-color: var(--color-signal-yellow-30);
   }
 }
+
+// make sure we style an Anchor like a button
+a.dnb-button {
+  // reset the anchor style
+  @include resetHoverStyle();
+  @include resetAnimationStyle();
+}
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index fca160f3f8e..cad54f45970 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -425,14 +425,13 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -527,7 +526,11 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 
 /*
 * DNB FormLabel
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index 282152f9dc4..d11a07ec341 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -282,14 +282,13 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -384,7 +383,11 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 
 /*
 * DNB FormLabel
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index d534e35448e..2e715402b1d 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -122,6 +122,10 @@ exports[`Input scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+/*
+ * Anchor
+ *
+ */
 /*
  * Typography
  *
@@ -467,14 +471,13 @@ exports[`Input scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -569,7 +572,11 @@ exports[`Input scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 
 /*
 * DNB FormLabel
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 8dc26e02ee3..63c6fb9c36d 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -657,14 +657,13 @@ exports[`Modal scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -759,7 +758,11 @@ exports[`Modal scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 
 .dnb-modal {
   font-family: sans-serif;
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
index 0966dc4f586..c6fbd9cc1c3 100644
--- a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -192,6 +192,10 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+/*
+ * Anchor
+ *
+ */
 /*
  * Typography
  *
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index cc1b0c3f1d4..a130e5075ad 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -207,6 +207,10 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+/*
+ * Anchor
+ *
+ */
 /*
  * Typography
  *
diff --git a/packages/dnb-ui-lib/src/patterns/action-nav/ActionNav.js b/packages/dnb-ui-lib/src/patterns/action-nav/ActionNav.js
index de6fe778f8e..7720f9c3957 100644
--- a/packages/dnb-ui-lib/src/patterns/action-nav/ActionNav.js
+++ b/packages/dnb-ui-lib/src/patterns/action-nav/ActionNav.js
@@ -8,16 +8,12 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
   registerElement,
-  validateDOMAttributes,
-  processChildren
+  validateDOMAttributes
 } from '../../shared/component-helper'
 // import './style/dnb-action-nav.scss' // no good solution to import the style here
 import Button from '../../components/button/Button'
 
-const renderProps = {
-  render_left_content: null,
-  render_right_content: null
-}
+const renderProps = {}
 
 export const propTypes = {
   prev_href: PropTypes.string,
@@ -33,10 +29,10 @@ export const propTypes = {
     PropTypes.string,
     PropTypes.node,
     PropTypes.func
-  ]),
+  ])
   // Web Component props
-  render_left_content: PropTypes.func,
-  render_right_content: PropTypes.func
+  // render_left_content: PropTypes.func,
+  // render_right_content: PropTypes.func
 }
 
 export const defaultProps = {
@@ -63,22 +59,9 @@ export default class ActionNav extends PureComponent {
     registerElement(ActionNav.tagName, ActionNav, defaultProps)
   }
 
-  static getLeftContent(props) {
-    if (typeof props.render_left_content === 'function') {
-      return props.render_left_content(props)
-    }
-    return null
-  }
-
-  static getRightContent(props) {
-    if (typeof props.render_right_content === 'function') {
-      return props.render_right_content(props)
-    }
-    return processChildren(props)
-  }
-
   render() {
     const {
+      children,
       prev_href,
       next_href,
       prev_text,
@@ -89,8 +72,8 @@ export default class ActionNav extends PureComponent {
       class: _className
     } = this.props
 
-    const leftContent = ActionNav.getLeftContent(this.props)
-    const rightContent = ActionNav.getRightContent(this.props)
+    // const leftContent = ActionNav.getLeftContent(this.props)
+    // const rightContent = ActionNav.getRightContent(this.props)
 
     const params = {
       className: classnames(
@@ -101,6 +84,8 @@ export default class ActionNav extends PureComponent {
       )
     }
 
+    const hasNavAttributes = prev_href && next_href
+
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
 
@@ -108,40 +93,38 @@ export default class ActionNav extends PureComponent {
       <div {...params}>
         <div className="dnb-width-limit">
           <div className="dnb-action-nav__inner">
-            {(leftContent && (
-              <div className="dnb-action-nav__left">{leftContent}</div>
-            )) || (
-              <div className="dnb-action-nav__left">
-                {prev_href && (
-                  <div className="dnb-action-nav__item">
-                    <Button
-                      type="button"
-                      text={prev_text}
-                      title={prev_title}
-                      variant="secondary"
-                      icon_position="left"
-                      icon="chevron_left"
-                      href={prev_href}
-                    />
-                  </div>
-                )}
-
-                {next_href && (
-                  <div className="dnb-action-nav__item">
-                    <Button
-                      text={next_text}
-                      title={next_title}
-                      variant="primary"
-                      icon="chevron_right"
-                      href={next_href}
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-            {rightContent && (
-              <div className="dnb-action-nav__right">{rightContent}</div>
-            )}
+            {(hasNavAttributes && (
+              <>
+                <div className="dnb-action-nav__left">
+                  {prev_href && (
+                    <div className="dnb-action-nav__item">
+                      <Button
+                        type="button"
+                        text={prev_text}
+                        title={prev_title}
+                        variant="secondary"
+                        icon_position="left"
+                        icon="chevron_left"
+                        href={prev_href}
+                      />
+                    </div>
+                  )}
+                  {next_href && (
+                    <div className="dnb-action-nav__item">
+                      <Button
+                        text={next_text}
+                        title={next_title}
+                        variant="primary"
+                        icon="chevron_right"
+                        href={next_href}
+                      />
+                    </div>
+                  )}
+                </div>
+                <div className="dnb-action-nav__right">{children}</div>
+              </>
+            )) ||
+              children}
           </div>
         </div>
       </div>
diff --git a/packages/dnb-ui-lib/src/patterns/action-nav/Example.js b/packages/dnb-ui-lib/src/patterns/action-nav/Example.js
index 6c8341b40df..1849e1ebb8a 100644
--- a/packages/dnb-ui-lib/src/patterns/action-nav/Example.js
+++ b/packages/dnb-ui-lib/src/patterns/action-nav/Example.js
@@ -12,27 +12,28 @@ class Example extends PureComponent {
     return (
       <Fragment>
         <div className="example-box">
-          <ActionNav prev_href="?prev" next_href="?next" />
-          <ActionNav
-            render_left_content={() => <h3>Custom left nav content</h3>}
-          >
-            <div className="dnb-action-nav__item">
-              <Button
-                text="Lagre"
-                title="Lagre"
-                icon_position="left"
-                variant="secondary"
-                icon="save"
-              />
+          {/* <ActionNav prev_href="?prev" next_href="?next" /> */}
+          <ActionNav prev_href="?prev" next_href="?next">
+            <p>Custom right nav content</p>
+          </ActionNav>
+        </div>
+        <div className="example-box">
+          <ActionNav>
+            <div className="dnb-action-nav__left">
+              Custom left nav content
             </div>
-            <div className="dnb-action-nav__item">
-              <Button
-                text="Avbryt"
-                title="Avbryt"
-                icon_position="left"
-                variant="secondary"
-                icon="close"
-              />
+            <div className="dnb-action-nav__right">
+              <div className="dnb-action-nav__item">
+                <Button
+                  text="Cancel"
+                  icon_position="left"
+                  variant="tertiary"
+                  icon="close"
+                />
+              </div>
+              <div className="dnb-action-nav__item">
+                <Button text="Save" icon_position="left" icon="save" />
+              </div>
             </div>
           </ActionNav>
         </div>
diff --git a/packages/dnb-ui-lib/src/patterns/action-nav/style/_action-nav.scss b/packages/dnb-ui-lib/src/patterns/action-nav/style/_action-nav.scss
index 7f389c56535..c177f424a5f 100644
--- a/packages/dnb-ui-lib/src/patterns/action-nav/style/_action-nav.scss
+++ b/packages/dnb-ui-lib/src/patterns/action-nav/style/_action-nav.scss
@@ -6,15 +6,17 @@
 .dnb-action-nav {
   &__inner {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
   &__left,
   &__right {
     display: flex;
-    justify-content: center;
   }
   &__left {
-    margin-bottom: 1rem;
+    margin: 0;
+    padding-right: 1rem;
   }
   &__item {
     margin-left: 1rem;
@@ -24,14 +26,13 @@
       margin-left: 0;
     }
   }
-  @include allAbove(medium) {
-    &__left {
-      padding-right: 1rem;
-      margin: 0;
-    }
+  @include allBelow(medium) {
     &__inner {
       justify-content: space-between;
-      flex-direction: row;
+      flex-direction: column;
+    }
+    &__left {
+      margin-bottom: 1rem;
     }
   }
 }
diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
index 9014d18c714..2c3e79c51e6 100644
--- a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
@@ -1,5 +1,5 @@
 /**
- * Main THeme
+ * Main Theme
  * You CAN change the content on the very top!
  *
  */
@@ -235,10 +235,12 @@ pre {
   }
 }
 
-::selection {
-  background: var(--color-mint-green);
-  color: var(--color-black);
-  text-shadow: none;
+@supports not (-ms-ime-align: auto) {
+  ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--color-black);
+    text-shadow: none;
+  }
 }
 
 // make sure we load the spacings after we have defined the defaults of the elements
diff --git a/packages/dnb-ui-lib/src/style/themes/imports.scss b/packages/dnb-ui-lib/src/style/themes/imports.scss
index 02964ba241d..bb1d3b62160 100644
--- a/packages/dnb-ui-lib/src/style/themes/imports.scss
+++ b/packages/dnb-ui-lib/src/style/themes/imports.scss
@@ -6,6 +6,7 @@
 
 // core imports
 @import '../core/utilities.scss';
+@import './theme-ui/anchor-mixins.scss';
 
 // we have to set a different $fonts-path
 // so typography gets imported twice, but the minifyed version (by using cssnano) is removing duplication
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss
new file mode 100644
index 00000000000..bd24ef65c96
--- /dev/null
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss
@@ -0,0 +1,92 @@
+/*
+ * Anchor
+ *
+ */
+
+@import '../../core/utilities.scss';
+
+@mixin defaultAnchorStyle($theme: null) {
+  // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
+  display: inline;
+
+  // top has 1px less, cause we now has 2px on border bottom hover
+  // the calculations are based on 24px line-height
+
+  // 1px = 0,0625
+  // 2px = 0,125
+  // 4px = 0,25
+
+  // on padding-top we have 4px
+  // on padding-bottom we have 2px, cause run a border-bottom with 2px
+  // this makes a total of 8px
+  // 24px line-height - 8px = 16px (font-size)
+  padding: 0.25rem 0.125rem 0.125rem;
+
+  // margins are not needed as long as we go for "inline"
+  // margin: -0.25rem 0 -0.125rem;
+
+  color: inherit;
+  color: var(--color-sea-green);
+
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-sea-green);
+
+  @if $theme == 'highlighted' {
+    color: var(--color-emerald-green);
+    border-bottom-color: var(--color-emerald-green);
+  }
+}
+@mixin hoverStyle() {
+  background-color: var(--color-mint-green-50);
+  border-bottom-width: 2px;
+}
+@mixin activeStyle() {
+  color: #fff;
+  background-color: var(--color-sea-green);
+  border-bottom: none;
+}
+@mixin focusStyle($whatinput: null) {
+  &:not(:active) {
+    @include hoverStyle();
+    transition: none;
+    border-bottom: none;
+  }
+  @if $whatinput {
+    @include fakeFocus($whatinput);
+  } @else {
+    @include fakeFocus();
+  }
+}
+
+// resettings
+@mixin resetUnderlineStyle() {
+  border-bottom: none;
+
+  // border
+  &::after {
+    border-bottom: none;
+    content: none;
+  }
+}
+@mixin resetHoverStyle() {
+  &:hover {
+    color: inherit;
+    // in case we dont want to change the color to the body color
+    // color: var(--color-sea-green);
+    background-color: inherit;
+    border-bottom-width: 1px;
+  }
+
+  // bg
+  &::before {
+    content: none;
+  }
+}
+@mixin resetAnimationStyle() {
+  transition: none;
+
+  // bg
+  &::before {
+    transition: max-height 0.01s linear;
+  }
+}
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss
index 2739d37f2aa..164de5f3738 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss
@@ -3,60 +3,7 @@
  *
  */
 
-@import '../core/utilities.scss';
-
-@mixin defaultAnchorStyle($theme: null) {
-  // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
-  display: inline;
-
-  // top has 1px less, cause we now has 2px on border bottom hover
-  // the calculations are based on 24px line-height
-
-  // 1px = 0,0625
-  // 2px = 0,125
-  // 4px = 0,25
-
-  // on padding-top we have 4px
-  // on padding-bottom we have 2px, cause run a border-bottom with 2px
-  // this makes a total of 8px
-  // 24px line-height - 8px = 16px (font-size)
-  padding: 0.25rem 0.125rem 0.125rem;
-
-  // margins are not needed as long as we go for "inline"
-  // margin: -0.25rem 0 -0.125rem;
-
-  color: inherit;
-  color: var(--color-sea-green);
-
-  text-decoration: none;
-  border-bottom: 1px solid var(--color-sea-green);
-
-  @if $theme == 'highlighted' {
-    color: var(--color-emerald-green);
-    border-bottom-color: var(--color-emerald-green);
-  }
-}
-@mixin hoverStyle() {
-  background-color: var(--color-mint-green-50);
-  border-bottom-width: 2px;
-}
-@mixin activeStyle() {
-  color: #fff;
-  background-color: var(--color-sea-green);
-  border-bottom: none;
-}
-@mixin focusStyle($whatinput: null) {
-  &:not(:active) {
-    @include hoverStyle();
-    transition: none;
-    border-bottom: none;
-  }
-  @if $whatinput {
-    @include fakeFocus($whatinput);
-  } @else {
-    @include fakeFocus();
-  }
-}
+@import './anchor-mixins.scss';
 
 a {
   @include defaultAnchorStyle();
@@ -148,37 +95,6 @@ a {
   }
 }
 
-// resettings
-@mixin resetUnderlineStyle() {
-  border-bottom: none;
-  // border
-  &::after {
-    border-bottom: none;
-    content: none;
-  }
-}
-@mixin resetHoverStyle() {
-  &:hover {
-    color: inherit;
-    // in case we dont want to change the color to the body color
-    // color: var(--color-sea-green);
-    background-color: inherit;
-    border-bottom-width: 1px;
-  }
-
-  // bg
-  &::before {
-    content: none;
-  }
-}
-@mixin resetAnimationStyle() {
-  transition: none;
-
-  // bg
-  &::before {
-    transition: max-height 0.01s linear;
-  }
-}
 .dnb-anchor-style {
   @include defaultAnchorStyle();
 }
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
index ae04be2d052..cad46799ff1 100644
--- a/packages/dnb-ui-lib/stories/componentsStories.js
+++ b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -29,6 +29,12 @@ stories.push([
       </Box>
       <Box>
         <Button text="Secondary" variant="secondary" icon="add" />
+        <Button
+          variant="secondary"
+          text="Secondary button with href"
+          href="?no-cache=1"
+          icon="add"
+        />
       </Box>
       <Box>
         <Button text="Signal" variant="signal" icon="add" />