diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 253ba57..32f2c3c 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -94,7 +94,7 @@
     <p>
       This library relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need
       to use a <code>&lt;button&gt;</code>. Input elements require labels. Icon buttons rely on
-      <code>aria-label</code>. This page will guide you through that process, but accessibility is a primary
+      <code>aria-label</code> (or corresponding styling classes). This page will guide you through that process, but accessibility is a primary
       goal of this project.
     </p>
 
@@ -613,6 +613,43 @@
             </div>
           </div>
         `) %>
+
+        <p>
+          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 class="minimize"></button>
+              <button class="maximize"></button>
+              <button 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 class="minimize"></button>
+              <button class="restore"></button>
+              <button 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 class="help"></button>
+              <button class="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 9d50c03..bf8f8f1 100644
--- a/style.css
+++ b/style.css
@@ -254,31 +254,36 @@ input[type="reset"]:disabled,
   outline: none;
 }
 
-.title-bar-controls button[aria-label="Minimize"] {
+.title-bar-controls button[aria-label="Minimize"],
+.title-bar-controls button.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.maximize {
   background-image: svg-load("./icon/maximize.svg");
   background-repeat: no-repeat;
   background-position: top 2px left 3px;
 }
 
-.title-bar-controls button[aria-label="Restore"] {
+.title-bar-controls button[aria-label="Restore"],
+.title-bar-controls button.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.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.close {
   margin-left: 2px;
   background-image: svg-load("./icon/close.svg");
   background-repeat: no-repeat;