feat: add button groups

index.html

@@ -20,8 +20,7 @@
         </ul>
         <ul class="menu">
             <li><a href="#">Home</a></li>
-            <li><a href="#">Mouette</a></li>
+            <li><a href="#" class="button">Mouette</a></li>
-            <li><span class="active">Exemple</span></li>
         </ul>
     </nav>
 
@@ -53,6 +52,13 @@
         <span class="badge">Badge span</span>
         <br />
         <a href="#" class="button link">Bouton lien .link</a>
+        <br />
+        <div class="button-group">
+            <button>Bouton (groupé)</button>
+            <a href="#" class="button">Bouton lien</a>
+            <a href="#" class="button">Bouton lien</a>
+            <button>Bouton</button>
+        </div>
     </p>
     
     <main>

src/components/_buttons.scss

@@ -46,4 +46,20 @@ a[href].button:not(.link), a[href].button:visited:not(.link), button, input[type
 :disabled, .disabled {
     filter: #{"grayscale(1)"};
     opacity: 0.5;
+}
+
+.button-group {
+    display:flex;
+    .button, button {
+        margin:0;
+        &:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid var(--color-accent-text);
+        }
+    }
 }