diff --git a/packages/website/docs/_samples/main/Button/CustomStyling/sample.html b/packages/website/docs/_samples/main/Button/CustomStyling/sample.html
index 9e552253434d..602ea3200265 100644
--- a/packages/website/docs/_samples/main/Button/CustomStyling/sample.html
+++ b/packages/website/docs/_samples/main/Button/CustomStyling/sample.html
@@ -12,14 +12,18 @@
     <!-- playground-fold-end -->
 
     <style>
-        ui5-button {
-            width: 300px;
-            color: darkorange;
-            background-color: #ffeded;
-            border-color: darkviolet;
+        [ui5-button] {
+            width: 10rem;
+            color: DarkSlateBlue;
+            background-color: #f4f2fd;
+            border-color: DarkSlateBlue;
+        }
+        [ui5-button]:active,
+        [ui5-button]:hover {
+            background-color: #dad4f7;
         }
     </style>
-    <ui5-button>Reject</ui5-button>
+    <ui5-button>Custom Button</ui5-button>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>