Replace :hover with :active

src/Components/Tailwind/Button.tsx

@@ -33,8 +33,7 @@ export default Button;
 
 const defaultDangerBtnClassName: ComponentProps<'div'>['className'] = `
   flex gap-2 text-white bg-red-700 font-medium rounded-lg text-sm px-4 h-fit py-3 justify-self-center
-  hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none
-  dark:focus:ring-red-800`;
+  active:bg-red-800 dark:bg-red-600 dark:active:bg-red-700`;
 
 export const DangerButton = ({children, className, onClick}: ButtonProps) => {
   const fullClassname = defaultDangerBtnClassName + ' ' + (className || '');
@@ -62,10 +61,10 @@ export const SimpleButton = ({children, className, onClick}: ButtonProps) => {
 };
 
 const defaultOultineBtnClassName: ComponentProps<'div'>['className'] = `
-  py-3 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg
-  border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4
-  focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400
-  dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700`;
+  py-3 px-3 text-sm font-medium text-gray-900 bg-white rounded-lg
+  border border-gray-200 active:bg-gray-100 active:text-blue-700
+  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600
+  dark:active:text-white dark:active:bg-gray-700`;
 
 export const OutlineButton = ({children, className, onClick}: ButtonProps) => {
   const fullClassname = `${defaultOultineBtnClassName} ${className}`;