diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
index 805280909354..1b22b847a836 100644
--- a/projects/core/styles/theme/appearance/outline.less
+++ b/projects/core/styles/theme/appearance/outline.less
@@ -17,7 +17,8 @@
         box-shadow: inset 0 0 0 1px var(--tui-base-06);
     });
 
-    &:checked {
+    &:checked,
+    &._checked {
         box-shadow: inset 0 0 0 2px var(--tui-primary);
 
         .appearance-hover({
diff --git a/projects/demo/src/modules/experimental/button/examples/2/index.html b/projects/demo/src/modules/experimental/button/examples/2/index.html
index 8a691e4aef24..05b426f05555 100644
--- a/projects/demo/src/modules/experimental/button/examples/2/index.html
+++ b/projects/demo/src/modules/experimental/button/examples/2/index.html
@@ -40,6 +40,13 @@
     Outline
 </button>
 
+<button
+    appearance="whiteblock"
+    tuiButton
+>
+    Whiteblock
+</button>
+
 <button
     appearance="opposite"
     tuiButton
@@ -60,3 +67,27 @@
 >
     Floating
 </button>
+
+<p>
+    Use
+    <code>_checked</code>
+    class to emulate
+    <code>:checked</code>
+    CSS state for whiteblock/outline appearance:
+</p>
+
+<button
+    appearance="outline"
+    tuiButton
+    class="_checked"
+>
+    Outline
+</button>
+
+<button
+    appearance="whiteblock"
+    tuiButton
+    class="_checked"
+>
+    Whiteblock
+</button>