Change button hover effect and add horizontal line

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -163,7 +163,6 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
 
               <div className="input-group justify-content-center d-flex mt-5">
                 <button type="button" disabled={forceDisableForm || disableForm} className="btn btn-fill" id="register">
-                  <div className="eff"></div>
                   <span className="btn-label"></span><span className="material-symbols-outlined">person_add</span>
                   <span className="btn-label-text">{t('Create')}</span>
                 </button>

apps/app/src/components/InvitedForm.tsx

@@ -142,7 +142,6 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         {/* Create Button */}
         <div className="input-group justify-content-center d-flex mt-4">
           <button type="submit" className="btn btn-fill" id="register" disabled={isLoading}>
-            <div className="eff"></div>
             <span className="btn-label">
               {isLoading ? (
                 <LoadingSpinner />

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -83,12 +83,27 @@
     .btn-fill##{$label} {
       background-color: nth($colors, 1);
       border: 1px solid rgba(white, 0.1);
-      .eff {
+      transition: 0.8s ease;
+      &:hover ,
+      &:focus {
         background-color: nth($colors, 2);
       }
     }
   }
 
+  .text-line {
+    display: flex;
+    align-items: center;
+    &:before,
+    &:after {
+      flex-grow: 1;
+      height: 1px;
+      margin:0 1em;
+      content: '';
+      background: rgba(white,0.5);
+    }
+  }
+
   // footer link text
   .link-growi-org {
     font-size: smaller;

apps/app/src/components/LoginForm.tsx

@@ -235,7 +235,6 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               data-testid="btnSubmitForLogin"
               disabled={isLoading}
             >
-              <div className="eff"></div>
               <span className="btn-label pe-0">
                 {isLoading ? (
                   <LoadingSpinner />
@@ -247,8 +246,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             </button>
           </div>
         </form>
-        <div className="text-center">
-          <p className="text-white">{t('or')}</p>
+        <div className="text-center text-line mb-3">
+          <p className="text-white mb-0">{t('or')}</p>
         </div>
       </>
     );
@@ -284,7 +283,6 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
     return (
       <div key={auth} className="my-2">
         <button type="button" className="btn btn-fill col-6 mx-auto" id={auth} onClick={handleLoginWithExternalAuth}>
-          <div className="eff"></div>
           <span className="btn-label pe-0">
             <i className={`fa fa-${authIconNames[auth]}`}></i>
           </span>
@@ -506,7 +504,6 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               id="register"
               disabled={(!isMailerSetup && isEmailAuthenticationEnabled) || isLoading}
             >
-              <div className="eff"></div>
               <span className="btn-label pe-0">
                 {isLoading ? (
                   <LoadingSpinner />