Unify button styles

index.html

@@ -255,7 +255,7 @@
             <div class="contact-item__label">E-Mail</div>
             <div class="contact-item__value">fabienne@fabiennefoehn.ch</div>
             <button
-              class="copy-button"
+              class="button button--dark copy-button"
               type="button"
               data-copy-value="fabienne@fabiennefoehn.ch"
               aria-label="E-Mail kopieren"
@@ -276,7 +276,7 @@
             <div class="contact-item__label">Telefon</div>
             <div class="contact-item__value">+41 78 600 14 11</div>
             <button
-              class="copy-button"
+              class="button button--dark copy-button"
               type="button"
               data-copy-value="+41 78 600 14 11"
               aria-label="Telefonnummer kopieren"

styles.css

@@ -184,12 +184,15 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.55rem;
   width: fit-content;
   min-width: 13rem;
+  min-height: 4.25rem;
   padding: 1rem 1.7rem;
   border: 0;
   border-radius: var(--radius-button);
   font-weight: var(--font-weight-bold);
+  line-height: 1;
   cursor: pointer;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast),
     background var(--transition-fast);
@@ -197,15 +200,12 @@ button {
 
 .button:hover,
 .button:focus-visible,
-.copy-button:hover,
-.copy-button:focus-visible,
 .contact-flyover__close:hover,
 .contact-flyover__close:focus-visible {
   transform: translateY(-1px);
 }
 
 .button:focus-visible,
-.copy-button:focus-visible,
 .contact-flyover__close:focus-visible {
   outline: 3px solid #ef49ae;
   outline-offset: 3px;
@@ -669,20 +669,13 @@ button {
 .copy-button {
   grid-column: 2;
   grid-row: 1 / span 2;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.8rem 1rem;
-  border: 0;
-  border-radius: 999px;
-  background: var(--bg-dark);
-  color: var(--bg-light);
+  align-self: center;
+  justify-self: end;
+  min-width: 8.5rem;
   white-space: nowrap;
-  cursor: pointer;
-  transition: transform var(--transition-fast), background var(--transition-fast);
 }
 
-.copy-button svg {
+.button svg {
   width: 1.15rem;
   height: 1.15rem;
   fill: none;
@@ -913,5 +906,7 @@ button {
     grid-column: 1;
     grid-row: auto;
     justify-content: center;
+    justify-self: stretch;
+    width: 100%;
   }
 }