diff --git a/docs/_includes/global/native.html b/docs/_includes/global/native.html
index eb680992..b8ceee2d 100644
--- a/docs/_includes/global/native.html
+++ b/docs/_includes/global/native.html
@@ -59,7 +59,7 @@
       }
 
       .native-cta:hover {
-        color: #native_cta_color_hover;
+        color: #native_cta_color_hover#;
         background-color: #native_cta_bg_color_hover#;
       }
     </style>
@@ -70,6 +70,6 @@
         <span class="native-desc">#native_desc#</span>
       </div>
     </div>
-    <span class="native-cta">#native_cta#</span>
+    <span class="button is-medium native-cta">#native_cta#</span>
   </a>
 </div>
diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass
index 446d7a32..ca27aaa9 100644
--- a/docs/_sass/native.sass
+++ b/docs/_sass/native.sass
@@ -16,6 +16,10 @@
   justify-content: center
   padding: 2em
   text-decoration: none
+  &:hover
+    .native-cta
+      box-shadow: 0 1rem 2rem 0 rgba($black, 0.1)
+      transform: translateY(-0.25rem)
 
 .native-img
   border-radius: 3px
@@ -46,22 +50,15 @@
 
 .native-cta
   border: none
-  border-radius: 3px
-  box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15)
-  display: inline-block
+  box-shadow: 0 0.5rem 1rem 0 rgba($black, 0.2)
   flex-grow: 0
   flex-shrink: 0
-  font-size: 0.75em
-  font-weight: $weight-normal
-  padding: 0.75em 1em
-  text-transform: uppercase
-  transform: translateY(-1px)
-  transition: transform .3s ease-in-out
-  vertical-align: top
-  white-space: nowrap
-  &:hover
-    box-shadow: none
-    transform: translateY(1px)
+  font-weight: $weight-semibold
+  height: auto
+  padding: 0.5em 1em
+  transition-duration: $speed * 2
+  transition-property: box-shadow, transform
+  will-change: box-shadow, transform
 
 $native-bp: 600px
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 4bb7ddf9..068c01b2 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -12754,6 +12754,11 @@ svg {
   text-decoration: none;
 }
 
+.native-flex:hover .native-cta {
+  box-shadow: 0 1rem 2rem 0 rgba(10, 10, 10, 0.1);
+  transform: translateY(-0.25rem);
+}
+
 .native-img {
   border-radius: 3px;
   flex-grow: 0;
@@ -12788,24 +12793,15 @@ svg {
 
 .native-cta {
   border: none;
-  border-radius: 3px;
-  box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15);
-  display: inline-block;
+  box-shadow: 0 0.5rem 1rem 0 rgba(10, 10, 10, 0.2);
   flex-grow: 0;
   flex-shrink: 0;
-  font-size: 0.75em;
-  font-weight: 400;
-  padding: 0.75em 1em;
-  text-transform: uppercase;
-  transform: translateY(-1px);
-  transition: transform .3s ease-in-out;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.native-cta:hover {
-  box-shadow: none;
-  transform: translateY(1px);
+  font-weight: 600;
+  height: auto;
+  padding: 0.5em 1em;
+  transition-duration: 172ms;
+  transition-property: box-shadow, transform;
+  will-change: box-shadow, transform;
 }
 
 @media screen and (max-width: 599px) {