4 files changed, 5 insertions, 4 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 4e755dba..b5a4e2f5 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,7 +1,7 @@
 .cru-button {
   font-size: 1rem;
   padding: 0.4em 0.8em;
-  transition: all 0.5s;
+  transition: all 0.3s;
   border-radius: 0.2em;
   border: 1px solid;
   cursor: pointer;
@@ -39,6 +39,7 @@
 .cru-button.outline {
   color: var(--cru-button-normal-color);
   border-color: var(--cru-button-normal-color);
+  background-color: transparent;
 }
 
 .cru-button.outline:hover {
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 02d00ee5..573055cf 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,8 +33,8 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        color && `cru-${color}-button`,
         "cru-button",
+        `cru-button-${color ?? "primary"}`,
         outline && "outline",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index d3a8b240..60050e0d 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -18,9 +18,9 @@ export default function IconButton(props: IconButtonProps) {
     <button
       className={classNames(
         "cru-icon-button",
+        `cru-button-${color ?? "primary"}`,
         large && "large",
         "bi-" + icon,
-        color && `cru-button-${color}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 441abbbd..43aca766 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -26,8 +26,8 @@ export default function LoadingButton(props: LoadingButtonProps) {
     <button
       disabled={disabled || loading}
       className={classNames(
-        color && `cru-${color}`,
         "cru-button outline cru-loading-button",
+        `cru-button-${color ?? "primary"}`,
         className,
       )}
       {...otherProps}