diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 0d8794ddf..886ec8567 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -529,11 +529,15 @@
     height: var(--new-tab-button-size);
     background: var(--new-tab-button-background);
     border-radius: 50%;
+    transition: background-color 200ms ease-out,
+                box-shadow 200ms ease-out;
 }
 
 .tab-row-widget .note-new-tab:hover::before {
     background: var(--new-tab-button-hover-background);
     box-shadow: var(--new-tab-button-shadow);
+    transition: background-color 100ms ease-in,
+                box-shadow 100ms ease-in;
 }
 
 .tab-row-widget .note-new-tab::after {
@@ -550,10 +554,12 @@
     font-family: boxicons;
     font-size: calc(var(--new-tab-button-size) * .75);
     color: var(--new-tab-button-color);
+    transition: color 200ms ease-out,
 }
 
 .tab-row-widget .note-new-tab:hover::after {
     color: var(--new-tab-button-hover-color);
+    transition: color 100ms ease-in,
 }