Add hover effect to button

Author: webdevia

src/shared/button/Button.modules.scss

@@ -6,9 +6,15 @@
   border: none;
   border-radius: 5px;
   cursor: pointer;
-}
 
-.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
+  &:hover {
+    &:not([disabled]) {
+      background-color: #0056b3;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 }

src/shared/button/Button.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import cn from 'clsx';
 import s from './Button.modules.scss';
 
 type ButtonProps = {
@@ -9,7 +8,7 @@ type ButtonProps = {
 };
 
 export const Button = ({ children, onClick, disabled = false }: ButtonProps) => (
-  <button className={cn(s.button, { [s.disabled]: disabled })} onClick={onClick}>
+  <button className={s.button} onClick={onClick} disabled={disabled}>
     {children}
   </button>
 );