diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 30f435c0190a..09bdf032b815 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -52,7 +52,6 @@
     color: var(--#{$prefix}btn-hover-color);
     @include gradient-bg(var(--#{$prefix}btn-hover-bg));
     border-color: var(--#{$prefix}btn-hover-border-color);
-    outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
       box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
@@ -61,6 +60,11 @@
     }
   }
 
+  .btn-check:focus:not(:focus-visible) + &,
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
   .btn-check:checked + &,
   .btn-check:active + &,
   &:active,
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 6f325689462e..f4865daf8a42 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -320,15 +320,11 @@
   pre {
     padding: 0;
     margin-top: .625rem;
+    margin-right: 1.875rem;
     margin-bottom: .625rem;
     white-space: pre;
     background-color: transparent;
     border: 0;
-
-    // Undo tabindex that's automatically added by Hugo
-    &:focus {
-      outline: 0;
-    }
   }
 
   pre code {