1 files changed, 36 insertions, 28 deletions

diff --git a/docs/assets/scss/_buttons.scss b/docs/assets/scss/_buttons.scss
index 25bcbbd4b..13bd6e48a 100644
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@@ -2,36 +2,44 @@
 //
 // Custom buttons for the docs.
 
+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
-  color: $bd-purple-bright;
-  border-color: $bd-purple-bright;
-
-  &:hover,
-  &:active {
-    color: $white;
-    background-color: $bd-purple-bright;
-    border-color: $bd-purple-bright;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet);
+  --bs-btn-border-color: var(--bd-violet);
+  --bs-btn-border-radius: .5rem;
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
+// scss-docs-end btn-css-vars-example
 
-.btn-bd-download {
-  font-weight: 600;
-  color: $bd-download;
-  border-color: $bd-download;
-
-  &:hover,
-  &:active {
-    color: $bd-dark;
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
 
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
+.btn-bd-light {
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-gray-400);
+  --bs-btn-hover-color: var(--bd-violet);
+  --bs-btn-hover-border-color: var(--bd-violet);
+  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--bd-violet);
+  --bs-btn-focus-border-color: var(--bd-violet);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }