diff --git a/packages/pagination/.size-snapshot.json b/packages/pagination/.size-snapshot.json
index ff740b6a558..8c354c913f7 100644
--- a/packages/pagination/.size-snapshot.json
+++ b/packages/pagination/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 27107,
-    "minified": 17989,
-    "gzipped": 4538
+    "bundled": 27078,
+    "minified": 17978,
+    "gzipped": 4529
   },
   "index.esm.js": {
-    "bundled": 25072,
-    "minified": 16368,
-    "gzipped": 4340,
+    "bundled": 25043,
+    "minified": 16357,
+    "gzipped": 4331,
     "treeshaked": {
       "rollup": {
-        "code": 13342,
+        "code": 13331,
         "import_statements": 490
       },
       "webpack": {
-        "code": 15142
+        "code": 15131
       }
     }
   }
diff --git a/packages/pagination/src/styled/Pagination/StyledPageBase.ts b/packages/pagination/src/styled/Pagination/StyledPageBase.ts
index 1c8971ec4e1..d322d014657 100644
--- a/packages/pagination/src/styled/Pagination/StyledPageBase.ts
+++ b/packages/pagination/src/styled/Pagination/StyledPageBase.ts
@@ -86,10 +86,14 @@ export const StyledPageBase = styled.li.attrs({
 })`
   box-sizing: border-box;
   display: inline-block;
-  transition: box-shadow 0.1s ease-in-out, color 0.25s ease-in-out;
+  /* prettier-ignore */
+  transition:
+    box-shadow 0.1s ease-in-out,
+    background-color 0.25s ease-in-out,
+    color 0.25s ease-in-out;
   visibility: ${props => props.hidden && 'hidden'};
   border-radius: ${props => props.theme.borderRadii.md};
-  cursor: ${props => !(props as any).disabled && 'pointer'};
+  cursor: pointer;
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
@@ -97,10 +101,6 @@ export const StyledPageBase = styled.li.attrs({
 
   ${props => sizeStyles(props)};
 
-  &:hover {
-    transition: background-color 0.25s ease-in-out;
-  }
-
   &:focus {
     outline: none;
   }
@@ -109,6 +109,11 @@ export const StyledPageBase = styled.li.attrs({
     font-weight: ${props => props.theme.fontWeights.semibold};
   }
 
+  :disabled,
+  [aria-disabled='true'] {
+    cursor: default;
+  }
+
   ${props => colorStyles(props)};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};