diff --git a/README.md b/README.md
index 3fa4de2..95c647e 100644
--- a/README.md
+++ b/README.md
@@ -18,24 +18,37 @@ The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>98.css example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://unpkg.com/98.css" />
-</head>
-
-<body>
-  <div class="window" style="margin: 32px; width: 250px">
-    <div class="title-bar">
-      <div class="title-bar-text">
-        My First VB4 Program
+  <head>
+    <title>98.css example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://unpkg.com/98.css" />
+  </head>
+
+  <body>
+    <div class="window" style="margin: 32px; width: 250px">
+      <div class="title-bar">
+        <div class="title-bar-text">My First VB4 Program</div>
+      </div>
+      <div class="window-body">
+        <p>Hello, world!</p>
       </div>
     </div>
-    <div class="window-body">
-      <p>Hello, world!</p>
-    </div>
-  </div>
-</body>
+
+    <svg id="filters-98css">
+      <defs>
+        <filter id="disabled-filter-98css">
+          <feColorMatrix
+            type="matrix"
+            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -21.25 -71.54 -7.21 40 0"
+            result="color-matrix"
+          />
+          <feFlood flood-color="grey" result="color" />
+          <feComposite in="color" in2="color-matrix" operator="in" />
+          <feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="white" />
+        </filter>
+      </defs>
+    </svg>
+  </body>
 </html>
 ```
 
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 9568d56..d78f9c8 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -167,6 +167,19 @@
         </p>
 
         <%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
+
+        <p>
+          Images and elements with <code>[role=img]</code> inside the button will get disabled state when the button is disabled.
+        </p>
+
+        <%- example(`
+          <button style="height: auto; padding: 16px;">
+            <img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
+          </button>
+          <button style="height: auto; padding: 16px;" disabled>
+            <img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
+          </button>
+        `) %>
       </div>
     </section>
 
@@ -987,5 +1000,20 @@
       subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
     </p>
   </main>
+
+  <svg id="filters-98css">
+    <defs>
+      <filter id="disabled-filter-98css">
+        <feColorMatrix
+          type="matrix"
+          values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -21.25 -71.54 -7.21 40 0"
+          result="color-matrix"
+        />
+        <feFlood flood-color="grey" result="color" />
+        <feComposite in="color" in2="color-matrix" operator="in" />
+        <feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="white" />
+      </filter>
+    </defs>
+  </svg>
 </body>
 </html>
diff --git a/docs/mail-icon.png b/docs/mail-icon.png
new file mode 100644
index 0000000..484c3b0
Binary files /dev/null and b/docs/mail-icon.png differ
diff --git a/style.css b/style.css
index 12cf871..fb9076c 100644
--- a/style.css
+++ b/style.css
@@ -200,6 +200,11 @@ input[type="reset"]:disabled,
   text-shadow: 1px 1px 0 var(--button-highlight);
 }
 
+button:disabled img,
+button:disabled [role="img"] {
+  filter: url("#disabled-filter-98css");
+}
+
 .window {
   box-shadow: var(--border-window-outer), var(--border-window-inner);
   background: var(--surface);
@@ -885,3 +890,10 @@ table > tbody > tr > * {
   padding: 0 var(--grouped-element-spacing);
   height: 14px;
 }
+
+#filters-98css {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
