diff --git a/package-lock.json b/package-lock.json
index 3e6e8dc6..21fe437c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.21.1",
+  "version": "5.22.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index af015461..891da50a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.21.1",
+  "version": "5.22.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/button.css b/src/css/button.css
index 6cbd2fd5..8e22be41 100755
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -55,6 +55,11 @@ input[type="submit"]:active {
   transition: none;
 }
 
+button.active,
+.button.active {
+  color: rgb(var(--button-text-focus-active));
+}
+
 button.disabled,
 button.disabled:hover,
 button.disabled:focus,
@@ -96,7 +101,8 @@ button:disabled:active,
   background-color: rgb(var(--button-border-focus-hover));
 }
 
-.button-line:active:after {
+.button-line:active:after,
+.button-line.active:after {
   background-color: rgb(var(--button-border-active));
   transition: none;
 }
@@ -112,6 +118,31 @@ button:disabled:active,
   background-color: rgb(var(--button-border-disabled));
 }
 
+.button-ring {
+  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.button-ring:focus,
+.button-ring:hover {
+  box-shadow: var(--form-ring-hover);
+}
+
+.button-ring:active,
+.button-ring.active {
+  box-shadow: var(--form-ring-accent);
+}
+
+.button-ring.disabled,
+.button-ring:disabled,
+.button-ring.disabled:focus,
+.button-ring:disabled:focus,
+.button-ring.disabled:hover,
+.button-ring:disabled:hover,
+.button-ring.disabled:active,
+.button-ring:disabled:active {
+  box-shadow: none;
+}
+
 .button-text {
   pointer-events: none;
 }
@@ -124,14 +155,6 @@ button [class*=" icon-"],
   font-size: 1.5em;
 }
 
-.button.active {
-  color: rgb(var(--button-text-focus-active));
-}
-
-.button-line.active:after {
-  background-color: rgb(var(--theme-accent));
-}
-
 .button-small {
   font-size: 0.8em;
 }
@@ -167,19 +190,6 @@ button [class*=" button-"]:last-child,
   margin-right: 0;
 }
 
-.button-ring {
-  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
-}
-
-.button-ring:focus,
-.button-ring:hover {
-  box-shadow: var(--form-ring-hover);
-}
-
-.button-ring:active {
-  box-shadow: var(--form-ring-accent);
-}
-
 .button-link {
   background-color: transparent;
   border: 0;
diff --git a/src/css/form.css b/src/css/form.css
index 5abfd090..ae5d2089 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -113,7 +113,7 @@ select {
   font-family: var(--theme-font-ui-name);
   font-weight: var(--theme-font-ui-weight);
   font-style: var(--theme-font-ui-style);
-  line-height: 2;
+  line-height: 2.5;
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
@@ -247,7 +247,7 @@ input[type="text"] {
   font-family: var(--theme-font-ui-name);
   font-weight: var(--theme-font-ui-weight);
   font-style: var(--theme-font-ui-style);
-  line-height: 1.6em;
+  line-height: 1.6;
   height: 2.5em;
   min-width: 0;
   width: 100%;
@@ -1037,6 +1037,57 @@ input[type="range"]:disabled::-moz-range-progress {
   top: inherit;
 }
 
+.form-input-button-ring input[type="checkbox"]+label,
+.form-input-button-ring input[type="radio"]+label,
+.form-input-button-ring input[type="color"]+label,
+.form-input-button-ring input[type="file"]+label {
+  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.form-input-button-ring input[type="checkbox"]:focus+label,
+.form-input-button-ring input[type="checkbox"]:hover+label,
+.form-input-button-ring input[type="radio"]:focus+label,
+.form-input-button-ring input[type="radio"]:hover+label,
+.form-input-button-ring input[type="color"]:focus+label,
+.form-input-button-ring input[type="color"]:hover+label,
+.form-input-button-ring input[type="file"]:focus+label,
+.form-input-button-ring input[type="file"]:hover+label {
+  box-shadow: var(--form-ring-hover);
+}
+
+.form-input-button-ring input[type="checkbox"]:active+label,
+.form-input-button-ring input[type="radio"]:active+label,
+.form-input-button-ring input[type="color"]:active+label,
+.form-input-button-ring input[type="file"]:active+label {
+  box-shadow: var(--form-ring-accent);
+}
+
+.form-input-button-ring input[type="checkbox"]:checked+label,
+.form-input-button-ring input[type="radio"]:checked+label,
+.form-input-button-ring input[type="color"]:checked+label,
+.form-input-button-ring input[type="file"]:checked+label {
+  box-shadow: var(--form-ring-accent);
+}
+
+.form-input-button-ring input[type="checkbox"]:disabled+label,
+.form-input-button-ring input[type="checkbox"]:disabled:hover+label,
+.form-input-button-ring input[type="checkbox"]:disabled:focus+label,
+.form-input-button-ring input[type="checkbox"]:disabled:active+label,
+.form-input-button-ring input[type="radio"]:disabled+label,
+.form-input-button-ring input[type="radio"]:disabled:hover+label,
+.form-input-button-ring input[type="radio"]:disabled:focus+label,
+.form-input-button-ring input[type="radio"]:disabled:active+label,
+.form-input-button-ring input[type="color"]:disabled+label,
+.form-input-button-ring input[type="color"]:disabled:hover+label,
+.form-input-button-ring input[type="color"]:disabled:focus+label,
+.form-input-button-ring input[type="color"]:disabled:active+label,
+.form-input-button-ring input[type="file"]:disabled+label,
+.form-input-button-ring input[type="file"]:disabled:hover+label,
+.form-input-button-ring input[type="file"]:disabled:focus+label,
+.form-input-button-ring input[type="file"]:disabled:active+label {
+  box-shadow: none;
+}
+
 .form-input-button-line input[type="checkbox"]+label:after,
 .form-input-button-line input[type="radio"]+label:after,
 .form-input-button-line input[type="color"]+label:after,
@@ -1349,11 +1400,10 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group .form-group-text,
 .form-group .button,
-.form-group .button-line:after,
-.form-group .form-input-button-line input[type="checkbox"]+label:after,
-.form-group .form-input-button-line input[type="radio"]+label:after,
-.form-group .form-input-button-line input[type="color"]+label:after,
-.form-group .form-input-button-line input[type="file"]+label:after,
+.form-group .form-input-button input[type="checkbox"]+label,
+.form-group .form-input-button input[type="radio"]+label,
+.form-group .form-input-button input[type="color"]+label,
+.form-group .form-input-button input[type="file"]+label,
 .form-group>select,
 .form-group>input[type="email"],
 .form-group>input[type="number"],
@@ -1373,12 +1423,24 @@ input[type="range"]:disabled::-moz-range-progress {
   z-index: 1;
 }
 
+.form-group .button-line:after,
+.form-group .form-input-button-line input[type="checkbox"]+label:after,
+.form-group .form-input-button-line input[type="radio"]+label:after,
+.form-group .form-input-button-line input[type="color"]+label:after,
+.form-group .form-input-button-line input[type="file"]+label:after {
+  border-radius: 0;
+}
+
 .form-group .form-group-text {
   flex-shrink: 0;
 }
 
 .form-group .form-group-text:focus,
 .form-group .button:focus,
+.form-group .form-input-button input[type="checkbox"]:focus+label,
+.form-group .form-input-button input[type="radio"]:focus+label,
+.form-group .form-input-button input[type="color"]:focus+label,
+.form-group .form-input-button input[type="file"]:focus+label,
 .form-group>select:focus,
 .form-group>input[type="email"]:focus,
 .form-group>input[type="number"]:focus,
@@ -1392,22 +1454,52 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .form-group .form-group-text:hover,
+.form-group .form-group-text:active,
 .form-group .button:hover,
+.form-group .button:active,
+.form-group .form-input-button input[type="checkbox"]:hover+label,
+.form-group .form-input-button input[type="checkbox"]:active+label,
+.form-group .form-input-button input[type="radio"]:hover+label,
+.form-group .form-input-button input[type="radio"]:active+label,
+.form-group .form-input-button input[type="color"]:hover+label,
+.form-group .form-input-button input[type="color"]:active+label,
+.form-group .form-input-button input[type="file"]:hover+label,
+.form-group .form-input-button input[type="file"]:active+label,
 .form-group>select:hover,
+.form-group>select:active,
 .form-group>input[type="email"]:hover,
+.form-group>input[type="email"]:active,
 .form-group>input[type="number"]:hover,
+.form-group>input[type="number"]:active,
 .form-group>input[type="password"]:hover,
+.form-group>input[type="password"]:active,
 .form-group>input[type="search"]:hover,
+.form-group>input[type="search"]:active,
 .form-group>input[type="tel"]:hover,
+.form-group>input[type="tel"]:active,
 .form-group>input[type="text"]:hover,
+.form-group>input[type="text"]:active,
 .form-group>input[type="color"]:hover,
-.form-group>input[type="range"]:hover {
+.form-group>input[type="color"]:active,
+.form-group>input[type="range"]:hover,
+.form-group>input[type="range"]:active {
+  z-index: 3;
+}
+
+.form-group .form-input-button input[type="checkbox"]:checked+label,
+.form-group .form-input-button input[type="radio"]:checked+label,
+.form-group .form-input-button input[type="color"]:checked+label,
+.form-group .form-input-button input[type="file"]:checked+label {
   z-index: 3;
 }
 
 .form-group .form-group-text:first-child,
 .form-group .button:first-child,
 .form-group .button-line:first-child:after,
+.form-group .form-input-button:first-child input[type="checkbox"]+label,
+.form-group .form-input-button:first-child input[type="radio"]+label,
+.form-group .form-input-button:first-child input[type="color"]+label,
+.form-group .form-input-button:first-child input[type="file"]+label,
 .form-group .form-input-button-line:first-child input[type="checkbox"]+label:after,
 .form-group .form-input-button-line:first-child input[type="radio"]+label:after,
 .form-group .form-input-button-line:first-child input[type="color"]+label:after,
@@ -1427,6 +1519,10 @@ input[type="range"]:disabled::-moz-range-progress {
 .form-group .form-group-text:last-child,
 .form-group .button:last-child,
 .form-group .button-line:last-child:after,
+.form-group .form-input-button:last-child input[type="checkbox"]+label,
+.form-group .form-input-button:last-child input[type="radio"]+label,
+.form-group .form-input-button:last-child input[type="color"]+label,
+.form-group .form-input-button:last-child input[type="file"]+label,
 .form-group .form-input-button-line:last-child input[type="checkbox"]+label:after,
 .form-group .form-input-button-line:last-child input[type="radio"]+label:after,
 .form-group .form-input-button-line:last-child input[type="color"]+label:after,
diff --git a/src/js/version.js b/src/js/version.js
index 6f441e95..bbae7366 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.21.1";
+  var current = "5.22.0";
 
   var name = "Zonked Tarsier";
 
diff --git a/src/manifest.json b/src/manifest.json
index e8f4b18f..0d43df74 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "5.21.1",
+  "version": "5.22.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"
diff --git a/src/style-guide.html b/src/style-guide.html
index 19e17640..3ffc0c06 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -65,73 +65,138 @@
     <hr>
     <div class="form-wrap">
       <div class="form-inline">
-        <button class="button button-small" tabindex="1">Button Small</button>
-        <button class="button" tabindex="1">Button Medium</button>
-        <button class="button button-large" tabindex="1">Button Large</button>
+        <button class="button" tabindex="1">Button</button>
+        <button class="button button-line" tabindex="1">Button line</button>
+        <button class="button button-ring" tabindex="1">Button ring</button>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="button button-small" tabindex="1">Button small</button>
+        <button class="button" tabindex="1">Button medium</button>
+        <button class="button button-large" tabindex="1">Button large</button>
       </div>
     </div>
     <hr>
     <div class="form-wrap">
-      <div class="form-input-button">
-        <input id="style-guide-input-button-1" type="checkbox" tabindex="1">
-        <label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
-      </div>
-    </div>
-    <div class="form-wrap">
-      <div class="form-group form-group-nested-button">
+      <div class="form-inline">
         <div class="form-input-button">
-          <input id="style-guide-radio-1" type="radio" name="style-guide-radio-1" tabindex="1">
-          <label for="style-guide-radio-1"><span class="label-icon"></span> Radio Button 1</label>
+          <input id="style-guide-checkbox-button-1" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-1" class="mb-0"><span class="label-icon"></span>Checkbox button</label>
         </div>
-        <div class="form-input-button">
-          <input id="style-guide-radio-2" type="radio" name="style-guide-radio-1" tabindex="1">
-          <label for="style-guide-radio-2"><span class="label-icon"></span> Radio Button 2</label>
+        <div class="form-input-button form-input-button-line">
+          <input id="style-guide-checkbox-button-2" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-2" class="mb-0"><span class="label-icon"></span>Checkbox button line</label>
         </div>
-        <div class="form-input-button">
-          <input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
-          <label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
-        </div>
-      </div>
-    </div>
-    <div class="form-wrap">
-      <div class="form-input-button form-input-hide">
-        <input id="style-guide-input-button-2" type="checkbox" tabindex="1">
-        <label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
-      </div>
-    </div>
-    <div class="form-wrap">
-      <div class="form-group form-group-nested-button">
-        <div class="form-input-button form-input-hide">
-          <input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
-          <label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
-        </div>
-        <div class="form-input-button form-input-hide">
-          <input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
-          <label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
-        </div>
-        <div class="form-input-button form-input-hide">
-          <input id="style-guide-radio-6" type="radio" name="style-guide-radio-2" tabindex="1">
-          <label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
+        <div class="form-input-button form-input-button-ring">
+          <input id="style-guide-checkbox-button-3" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-3" class="mb-0"><span class="label-icon"></span>Checkbox button ring</label>
         </div>
       </div>
     </div>
     <div class="form-wrap">
       <div class="form-inline">
         <div class="form-input-button form-input-hide">
+          <input id="style-guide-checkbox-button-4" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-4" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-line">
+          <input id="style-guide-checkbox-button-5" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-5" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden line</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-ring">
+          <input id="style-guide-checkbox-button-6" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-button-6" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden ring</label>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button">
+          <input id="style-guide-radio-button-1" type="radio" name="style-guide-radio-button-1" tabindex="1">
+          <label for="style-guide-radio-button-1"><span class="label-icon"></span> Radio button</label>
+        </div>
+        <div class="form-input-button">
+          <input id="style-guide-radio-button-2" type="radio" name="style-guide-radio-button-1" tabindex="1">
+          <label for="style-guide-radio-button-2"><span class="label-icon"></span> Radio button</label>
+        </div>
+        <div class="form-input-button">
+          <input id="style-guide-radio-button-3" type="radio" name="style-guide-radio-button-1" tabindex="1">
+          <label for="style-guide-radio-button-3"><span class="label-icon"></span> Radio button</label>
+        </div>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-button-4" type="radio" name="style-guide-radio-button-2" tabindex="1">
+          <label for="style-guide-radio-button-4"><span class="label-icon"></span> Radio button input hidden</label>
+        </div>
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-button-5" type="radio" name="style-guide-radio-button-2" tabindex="1">
+          <label for="style-guide-radio-button-5"><span class="label-icon"></span> Radio button input hidden</label>
+        </div>
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-button-6" type="radio" name="style-guide-radio-button-2" tabindex="1">
+          <label for="style-guide-radio-button-6"><span class="label-icon"></span> Radio button input hidden</label>
+        </div>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button form-input-hide form-input-button-line">
+          <input id="style-guide-radio-button-7" type="radio" name="style-guide-radio-button-3" tabindex="1">
+          <label for="style-guide-radio-button-7"><span class="label-icon"></span> Radio button input hidden line</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-line">
+          <input id="style-guide-radio-button-8" type="radio" name="style-guide-radio-button-3" tabindex="1">
+          <label for="style-guide-radio-button-8"><span class="label-icon"></span> Radio button input hidden line</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-line">
+          <input id="style-guide-radio-button-9" type="radio" name="style-guide-radio-button-3" tabindex="1">
+          <label for="style-guide-radio-button-9"><span class="label-icon"></span> Radio button input hidden line</label>
+        </div>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button form-input-hide form-input-button-ring">
+          <input id="style-guide-radio-button-10" type="radio" name="style-guide-radio-button-4" tabindex="1">
+          <label for="style-guide-radio-button-10"><span class="label-icon"></span> Radio button input hidden ring</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-ring">
+          <input id="style-guide-radio-button-11" type="radio" name="style-guide-radio-button-4" tabindex="1">
+          <label for="style-guide-radio-button-11"><span class="label-icon"></span> Radio button input hidden ring</label>
+        </div>
+        <div class="form-input-button form-input-hide form-input-button-ring">
+          <input id="style-guide-radio-button-12" type="radio" name="style-guide-radio-button-4" tabindex="1">
+          <label for="style-guide-radio-button-12"><span class="label-icon"></span> Radio button input hidden ring</label>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <div class="form-input-button input-color-dot form-input-button-line">
           <input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
-          <label for="style-guide-input-color-1">Hidden Input Colour Button</label>
+          <label for="style-guide-input-color-1">Input color button line</label>
         </div>
-        <div class="form-input-button input-color-dot">
+        <div class="form-input-button form-input-hide form-input-button-line">
           <input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
-          <label for="style-guide-input-color-2">Input Colour Button</label>
+          <label for="style-guide-input-color-2">Input color button input hidden line</label>
         </div>
-        <div class="form-input-button input-color-dot input-color-dot-accent">
+        <div class="form-input-button input-color-dot input-color-dot-accent form-input-button-line">
           <input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
-          <label for="style-guide-input-color-3">Input Colour Accent Button</label>
+          <label for="style-guide-input-color-3">Input color accent button line</label>
+        </div>
+        <div class="form-input-button input-color-dot input-color-dot-shade form-input-button-line">
+          <input id="style-guide-input-color-4" type="color" tabindex="1" value="#818aa0">
+          <label for="style-guide-input-color-4">Input color shade button line</label>
         </div>
         <div class="form-dropdown form-dropdown-inline">
-          <button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
-            <span class="button-text">Button Dropdown</span>
+          <button class="style-guide-form-dropdown form-dropdown-toggle button button-line mb-0" tabindex="1">
+            <span class="button-text">Button dropdown</span>
           </button>
           <ul class="list-unstyled form-dropdown-menu">
             <li>
@@ -263,7 +328,7 @@
       <div class="form-group form-group-block mb-0">
         <input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
         <input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
-        <button class="button mb-0" tabindex="1"><span class="button-text">Button</span></button>
+        <button class="button button-line mb-0" tabindex="1"><span class="button-text">Button</span></button>
         <select id="select-2" class="mb-0" tabindex="1">
           <option>Option 1</option>
           <option>Option 2</option>