diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 819f6e8..a41efff 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -613,11 +613,49 @@
             </div>
           </div>
         `) %>
+
         <p>
-          Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
+          Each <code>aria-label</code> also has a corresponding styling class to render the title bar buttons,
+          to let the <code>aria-label</code> text be in other languages without causing rendering, accessibility, or localization issues.
         </p>
 
         <%- example(`
+          <div class="title-bar">
+            <div class="title-bar-text">A Title Bar using Button Styling Classes</div>
+            <div class="title-bar-controls">
+              <button aria-label="Any Text" class="minimize"></button>
+              <button aria-label="Any Text" class="maximize"></button>
+              <button aria-label="Any Text" class="close"></button>
+            </div>
+          </div>
+
+          <br />
+
+          <div class="title-bar">
+            <div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div>
+            <div class="title-bar-controls">
+              <button aria-label="Any Text" class="minimize"></button>
+              <button aria-label="Any Text" class="restore"></button>
+              <button aria-label="Any Text" class="close"></button>
+            </div>
+          </div>
+
+          <br />
+
+          <div class="title-bar">
+            <div class="title-bar-text">A Helpful Bar using Button Styling Classes</div>
+            <div class="title-bar-controls">
+              <button aria-label="Any Text" class="help"></button>
+              <button aria-label="Any Text" class="close"></button>
+            </div>
+          </div>
+        `) %>
+
+    <p>
+        Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
+    </p>
+
+    <%- example(`
           <div class="title-bar">
             <div class="title-bar-text">A Title Bar with Maximize disabled</div>
             <div class="title-bar-controls">
@@ -626,7 +664,8 @@
               <button aria-label="Close"></button>
             </div>
           </div>
-        `) %>
+      `) %>
+
 		<p>
           You can make a title bar "inactive" by adding <code>inactive</code> class,
 		  useful when making more than one window.
diff --git a/style.css b/style.css
index 93719fa..1ed8111 100644
--- a/style.css
+++ b/style.css
@@ -45,7 +45,6 @@
   --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
   --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
   --checkmark-width: 7px;
-  --checkmark-top: 3px;
   --checkmark-left: 3px;
 
   /* Borders */
@@ -254,13 +253,15 @@ input[type="reset"]:disabled,
   outline: none;
 }
 
-.title-bar-controls button[aria-label="Minimize"] {
+.title-bar-controls button[aria-label="Minimize"],
+.title-bar-controls button[aria-label].minimize {
   background-image: svg-load("./icon/minimize.svg");
   background-repeat: no-repeat;
   background-position: bottom 3px left 4px;
 }
 
-.title-bar-controls button[aria-label="Maximize"] {
+.title-bar-controls button[aria-label="Maximize"],
+.title-bar-controls button[aria-label].maximize {
   background-image: svg-load("./icon/maximize.svg");
   background-repeat: no-repeat;
   background-position: top 2px left 3px;
@@ -272,19 +273,22 @@ input[type="reset"]:disabled,
   background-position: top 2px left 3px;
 }
 
-.title-bar-controls button[aria-label="Restore"] {
+.title-bar-controls button[aria-label="Restore"],
+.title-bar-controls button[aria-label].restore {
   background-image: svg-load("./icon/restore.svg");
   background-repeat: no-repeat;
   background-position: top 2px left 3px;
 }
 
-.title-bar-controls button[aria-label="Help"] {
+.title-bar-controls button[aria-label="Help"],
+.title-bar-controls button[aria-label].help {
   background-image: svg-load("./icon/help.svg");
   background-repeat: no-repeat;
   background-position: top 2px left 5px;
 }
 
-.title-bar-controls button[aria-label="Close"] {
+.title-bar-controls button[aria-label="Close"],
+.title-bar-controls button[aria-label].close {
   margin-left: 2px;
   background-image: svg-load("./icon/close.svg");
   background-repeat: no-repeat;
@@ -435,7 +439,6 @@ input[type="checkbox"]:checked + label::after {
   width: var(--checkmark-width);
   height: var(--checkmark-width);
   position: absolute;
-  top: var(--checkmark-top);
   left: calc(
     -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
   );