diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 253ba57..705ec4a 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -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 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>
           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 e516eb4..f1e088e 100644
--- a/style.css
+++ b/style.css
@@ -253,31 +253,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[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;
 }
 
-.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;