diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 253ba57..c8459a9 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -141,7 +141,7 @@
           They are given 12px of horizontal padding by default.
         </p>
 
-        <%- example(`<button>Click me</button>
+        <%- example(`<button class="default">Click me</button>
         <input type="submit" />
         <input type="reset" /> `)%>
 
diff --git a/style.css b/style.css
index 9d50c03..e6be1dc 100644
--- a/style.css
+++ b/style.css
@@ -58,6 +58,19 @@
     inset 1px 1px var(--window-frame);
   --border-sunken-inner: inset -2px -2px var(--button-face),
     inset 2px 2px var(--button-shadow);
+  --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
+  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
+  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
+  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
+
+
+  .default {
+    box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
+  }
+  
+  .default:active {
+    box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
+  }
 
   /* Window borders flip button-face and button-highlight */
   --border-window-outer: inset -1px -1px var(--window-frame),