diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 4032e341a9..ea0e93b52b 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -1,4 +1,4 @@
-/** By default, CRA's webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
+/** By default, CRAs webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
  * This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically, thus making it available easily
  * We can create separate variables to keep styles grouped logically, and export them as one appeneded string
 */
@@ -92,7 +92,41 @@ export const SwitchStyle = `
 }
 `;
 
+export const ButtonStyles = `
+.gh-portal-btn {
+    position: relative;
+    display: inline-block;
+    padding: 0 1.8rem;
+    height: 44px;
+    border: 0;
+    font-size: 1.5rem;
+    line-height: 42px;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: .4s ease;
+    box-shadow: none;
+    user-select: none;
+    width: 100%;
+}
+
+.gh-portal-btn:hover::before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 5px;
+}
+`;
+
 // Append all styles as string which we want to pass to iframe
-const FrameStyle = SwitchStyle;
+const FrameStyle = SwitchStyle + ButtonStyles;
 
 export default FrameStyle;
\ No newline at end of file
diff --git a/ghost/portal/src/components/common/ActionButton.js b/ghost/portal/src/components/common/ActionButton.js
index efe783b069..65f3516a5f 100644
--- a/ghost/portal/src/components/common/ActionButton.js
+++ b/ghost/portal/src/components/common/ActionButton.js
@@ -13,25 +13,8 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
     const textColor = getContrastColor(backgroundColor);
     return {
         button: {
-            display: 'inline-block',
-            padding: '0 1.8rem',
-            height: '44px',
-            border: '0',
-            fontSize: '1.5rem',
-            lineHeight: '42px',
-            fontWeight: '500',
-            letterSpacing: '0.2px',
-            textAlign: 'center',
-            textDecoration: 'none',
-            whiteSpace: 'nowrap',
-            borderRadius: '5px',
-            cursor: 'pointer',
-            transition: '.4s ease',
             color: textColor,
             backgroundColor,
-            boxShadow: 'none',
-            userSelect: 'none',
-            width: '100%',
             ...(style.button || {}) // Override any custom style
         }
     };
@@ -40,7 +23,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
 function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
     let Style = Styles({disabled, retry, brandColor, style});
     return (
-        <button onClick={e => onClick(e)} style={Style.button} disabled={disabled}>
+        <button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-primary" disabled={disabled}>
             {label}
         </button>
     );