diff --git a/src/components/styled/button.css b/src/components/styled/button.css
index a3cffe57d08..faf4bb9c728 100644
--- a/src/components/styled/button.css
+++ b/src/components/styled/button.css
@@ -215,18 +215,17 @@
       outline: 2px solid hsl(var(--p));
     }
   }
-  & > .btn:not(:first-of-type) {
+  &:not(.btn-group-vertical) > .btn:not(:first-of-type) {
     @apply -ml-px rounded-l-none;
   }
-  & > .btn:not(:last-of-type) {
+  &:not(.btn-group-vertical) > .btn:not(:last-of-type) {
     @apply rounded-r-none;
   }
-  &-vertical
-  {
-    .btn:not(:first-of-type) {
+  &-vertical {
+    & > .btn:not(:first-of-type) {
       @apply -mt-px rounded-t-none;
     }
-    .btn:not(:last-of-type) {
+    & > .btn:not(:last-of-type) {
       @apply rounded-b-none;
     }
 }
diff --git a/src/docs/src/routes/components/button-group.svelte.md b/src/docs/src/routes/components/button-group.svelte.md
index 01bc1268f9a..43e55b1887e 100644
--- a/src/docs/src/routes/components/button-group.svelte.md
+++ b/src/docs/src/routes/components/button-group.svelte.md
@@ -14,6 +14,7 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'btn-group', desc: 'Container for grouping multiple buttons' },
+  { type:'component', class: 'btn-group-vertical', desc: 'Container for grouping multiple buttons (vertical)' },
 ]}"
 />
 
@@ -32,6 +33,21 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Button group vertical">
+<div class="btn-group btn-group-vertical">
+  <button class="btn btn-active">Button</button>
+  <button class="btn">Button</button>
+  <button class="btn">Button</button>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$btn-group btn-group-vertical">
+  <button class="$$btn $$btn-active">Button</button>
+  <button class="$$btn">Button</button>
+  <button class="$$btn">Button</button>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Button group with radio buttons">
 <div class="btn-group">
   <input type="radio" name="options" data-title="1" class="btn" />