Fixed ButtinLink sizing inside flex

client/src/components/navigation/ButtonLink/button-link.scss

@@ -2,16 +2,10 @@
 @use 'styles/settings';
 
 .button.button-link {
-    padding: 0;
+    padding: 14px 50px;
 
-    a {
-        display: inline-block;
-        padding: 14px 50px;
-        width: 100%;
-
-        &, &:hover, &:active, &:focus {
-            color: settings.$white;
-        }
+    &, &:hover, &:active, &:focus {
+        color: settings.$white;
     }
 }
 

client/src/components/navigation/ButtonLink/index.tsx

@@ -2,8 +2,6 @@
 import { ReactNode } from "react";
 import { Link } from "react-router-dom";
 
-import Button from 'components/ui/Button';
-
 import './button-link.scss';
 
 interface Props {
@@ -14,13 +12,10 @@ interface Props {
 }
 
 export default function ButtonLink({ children, href, html, className }: Props) {
-    return (
-        <Button className={'button-link ' + (className ?? '')}>
-            { html
-                ? <a href={href}>{children}</a>
-                : <Link to={href}>{children}</Link>
-            }
-        </Button>
+    const classes = 'button button-link ' + (className ?? '');
+    return (html
+        ? <a className={classes} href={href}>{children}</a>
+        : <Link className={classes} to={href}>{children}</Link>
     );
 }
 

client/src/components/ui/Button/button.scss

@@ -3,19 +3,21 @@
 @use 'styles/functions' as fn;
 
 .button {
-    padding: 14px 50px;
     font-size: fn.toRem(18);
     font-weight: s.$weight-bold;
     background: s.$linear-gradient;
     box-shadow: 0px 5px 15px rgba(s.$black, 0.1);
     border-radius: 25px;
-    display: inline-block;
     color: s.$white;
     user-select: none;
     appearance: none;
     border: none;
     outline: none;
     will-change: transform;
+    padding: 14px 50px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 
     &.expanded {
         width: 100%;