diff --git a/base.htm b/base.htm
index fedea8a..a5e3224 100644
--- a/base.htm
+++ b/base.htm
@@ -119,7 +119,7 @@ main .highlight2 {
 main .highlighted {
     background: #ff0;
 }
-main pre, main tt {
+main pre, main tt, main kbd {
     font-family: Monaco,Consolas,Liberation Mono,Courier,monospace;
     white-space: pre;
 }
@@ -253,6 +253,40 @@ main footer {
     main a:visited {
         color: purple;
     }
+    main kbd {
+        display: inline-block;
+        border: 1px solid #888;
+        height: 24px;
+        padding: 0 4px;
+        margin: -2px 0 -2px;
+        border-radius: 4px;
+        font-weight: 700;
+        background-image: linear-gradient(#ddd 0%,#eee 10%,#bbb 10%,#ccc 30%,#fff 85%,#eee 85%,#888 100%);
+    }
+    main span.mbl, main span.mbr, main.mbw {
+        display: inline-block;
+        height: 24px;
+        min-width: 16px;
+        padding: 0;
+        margin: -2px 0 -2px;
+        vertical-align: middle;
+    }
+    main span.mbl::before {
+        content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACoqKj9/f2zs7O1tbWRkZGlpaWsrKybm5u2traNjY2Wlpanp6empqaYmJiPj4+3t7f5+fmjo6P19fXu7u6ZmZnx8fHi4uLm5ube3t7q6uqwsLC0tLS7u7u4uLi/v7/W1tbDw8PLy8vPz8/T09Pa2trHx8eIiIhERkShhqFGAAAAAXRSTlMAQObYZgAAAI5JREFUGNNV0EcCwjAMRFEB6R2DKSGQUBLp/idEjsG23m7+cgAMIsJWwR8Z235pumDTnkUbv+lg7CIfTqvSbTquxsGFfjWXLlwsdOFs+XC1EHAWOEwCh4/A4S1weAkcFoHDU0CI8zGQx1Cpe0BVAO0j0PIfiR4cnZjLdHP7abQ9VRVZnaZ1VvjfO42o7edfH3EoHZS6XE4AAAAASUVORK5CYII=);
+    }
+    main span.mbr::before {
+        content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACoqKj9/f2zs7O1tbWRkZGlpaWsrKybm5u2traNjY2Wlpanp6empqaYmJiPj4+3t7f5+fmjo6P19fXu7u6ZmZnx8fHi4uLm5ube3t7q6uqwsLC0tLS7u7u4uLi/v7/W1tbDw8PLy8vPz8/T09Pa2trHx8eIiIhERkShhqFGAAAAAXRSTlMAQObYZgAAAI9JREFUGNNV0NkWgjAMRdGozFOxWgdEcYLk/7/Q0EpL9tNd5/ECzLRCIoJF20zdlsinTbRn5Eu0O8zIl/Jk+dAPR4uWUo6d5QNenBDOTghXJ4RRQMCnwOErcPgIHN4Ch0ng8BIQ4nxYyWOo9H1FVwDqsaL4j8T0nknmy0xz+2uMO1UXWZ2mdVbo8LtBNK2dP/2+KB2shyfVAAAAAElFTkSuQmCC);
+    }
+    main span.mbw::before {
+        content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACzs7OoqKisrKyRkZGlpaX9/f22trabm5uNjY2mpqanp6ePj4+1tbWYmJi3t7eWlpajo6OZmZmwsLD5+fnu7u7x8fHi4uLW1tbm5ube3t7T09Pq6ur19fW4uLi7u7u0tLTa2trPz8+/v7/Dw8PLy8vHx8eIiIhERkS4354xAAAAAXRSTlMAQObYZgAAAKdJREFUGNNV0NkagiAUhdHjPAECzWWlWdL7P2Fno/nJumHzXx4iMMI5YeivVVOX592k2vkfy/1CxvjL6L6KJAd9ZF+GVxP144Eh4B170kPHEPAOmtwFEPxw5E6A4AeHKyD4wWEABD84nAHBDw43QPCDwyvA4RPgMAU4vAOO0mLcKFJqzHPDNETisSH4HpntVzbDyazaLZSdj2qqsk6Suqw2d7fO2fnmP7kAJW9a/HbiAAAAAElFTkSuQmCC);
+    }
+    main span.button {
+        border: 1px solid #555;
+        border-radius: 3px;
+        padding: 4px;
+        background-image: linear-gradient(#fff 0%,#fff 1%,#f2f2f2 1%,#ebebeb 50%,#ddd 50%,#cfcfcf 99%,#fff 99%,#fff 100%);
+        font-size: 90%;
+    }
     main footer {
         margin-top: 16px;
         border-top: 2px solid #2d70aa;
@@ -308,6 +342,12 @@ main footer {
                         <li><a href="#code_blocks">Code Blocks</a></li>
                     </ul>
                     <li><a href="#links">Links</a></li>
+                    <li><a href="#user_inputs">User Inputs</a></li>
+                    <ul>
+                        <li><a href="#keys">Keys</a></li>
+                        <li><a href="#buttons">Buttons</a></li>
+                        <li><a href="#mouse_buttons">Mouse buttons</a></li>
+                    </ul>
                 </ul>
             </nav>
         </header>
@@ -425,6 +465,29 @@ int main(int argc, char **argv)
                 <p>Here what <a href="#">a link</a> might look
                 like.</p>
             </section>
+            <section id="user_inputs">
+                <h1>User Inputs</h1>
+                <p>Because in documentation you might wanna talk about user
+                interactions with the application, and that might not always be
+                a command-line interface that's talked about. So...</p>
+                <section id="keys">
+                    <h2>Keys</h2>
+                    <p>You can use <kbd>Alt</kbd> + <kbd>C</kbd>, <kbd>Space</kbd> or
+                    the famous <kbd>any</kbd> key.</p>
+                </section>
+                <section id="buttons">
+                    <h2>Buttons</h2>
+                    <p>And for the sake of it, you can do the same with buttons.
+                    Talking about the <span class="button">Save</span> button or
+                    the like.</p>
+                </section>
+                <section id="mouse_buttons">
+                    <h2>Mouse buttons</h2>
+                    <p>And to continue with this, let's have mouse buttons in case
+                    you need to talk about <kbd>Ctrl</kbd> +
+                    <span class="mbl"></span> or similar.</p>
+                </section>
+            </section>
             <footer>
                 Copyright &copy; 2022 Author Name - All Rights Reserved
                 <br>