add effect

src/client/styles/scss/_login.scss

@@ -134,19 +134,41 @@
   .button-3 {
     position: relative;
     overflow: hidden;
+    color: white;
     text-align: center;
     cursor: pointer;
     background-color: rgba(lighten(black, 20%), 0.4);
     border: none;
+
+    .btn-label {
+      background-color: rgba($danger, 0.4);
+    }
+
+  }
+
+  .button-3 .btn-label {
+    position: relative;
+    z-index: 2;
+    color: white;
+    text-decoration: none;
     transition: all .5s ease;
   }
 
+  .button-3 .btn-label-text {
+    position: relative;
+    z-index: 2;
+    color: white;
+    text-decoration: none;
+    transition: all .5s ease;
+  }
+
+
   // 加えたいエフェクト
   .eff-3 {
     position: absolute;
     top: -50px;
     left: 0px;
-    z-index: 1;
+    z-index: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(#7e4153, 0.5);
@@ -154,8 +176,10 @@
     transition: all .5s ease;
   }
 
+
   // ホバーした時のボタンに与えたい変更(設定)
   .button-3:hover {
+    z-index: 1;
     color: white;
   }
 
@@ -164,6 +188,14 @@
     top: 0;
   }
 
+  .button-3:hover .btn-label {
+    color: #fff;
+  }
+
+  .button-3:hover .btn-label-text {
+    color: #fff;
+  }
+
   .btn-login.fcbtn {
     color: white;
     background-color: rgba(lighten(black, 20%), 0.4);
@@ -207,7 +239,7 @@
     }
   }
 
-  /*
+
   .btn-login.fcbtn {
     .btn-label {
       background-color: rgba($danger, 0.4);
@@ -219,6 +251,8 @@
     }
   }
 
+  /*
+
   .btn-login-oauth.fcbtn#google {
     .btn-label {
       background: rgba(#f13d25, 0.4);

src/server/views/login.html

@@ -145,12 +145,24 @@
             </div>
           </div>
 
+          <div class="input-group justify-content-center mt-5">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+
+              <button type="submit" class="btn button-3 fcbtn px-0 py-2">
+                <div class="eff-3"></div>
+                <span class="btn-label p-3"><i class="icon-login"></i></span>
+                <span class="btn-label-text p-3">{{ t('Sign in') }}</span>
+              </button>
+            </div>
+
+
           <div class="input-group justify-content-center mt-5">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
 
-            <button type="submit" class="btn button-3 fcbtn">
+            <button type="submit" class="btn button-3 fcbtn px-0 py-2">
               <div class="eff-3"></div>
-              <span class="btn-label"><i class="icon-login"></i>{{ t('Sign in') }}</span>
+              <span class="btn-label p-3"><i class="icon-login"></i></span>
+              <span class="btn-label-text p-3">{{ t('Sign in') }}</span>
             </button>
           </div>