WIP add hover effect

src/client/styles/scss/_login.scss

@@ -129,6 +129,58 @@
   }
 
   // button style
+
+  // ボタンの設定
+  .button-3 {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    cursor: pointer;
+    background-color: rgba(lighten(black, 20%), 0.4);
+    border: none;
+    transition: all .5s ease;
+  }
+
+  // 加えたいエフェクト
+  .eff-3 {
+    position: absolute;
+    top: -50px;
+    left: 0px;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(#7e4153, 0.5);
+    // 変化のスピード
+    transition: all .5s ease;
+  }
+
+  // ホバーした時のボタンに与えたい変更(設定)
+  .button-3:hover {
+    color: white;
+  }
+
+  // ホバーしたときのエフェクトに与えたい変更(設定)
+  .button-3:hover .eff-3 {
+    top: 0;
+  }
+
+  .btn-login.fcbtn {
+    color: white;
+    background-color: rgba(lighten(black, 20%), 0.4);
+    border: none;
+    transition: all 1s ease 0s;
+
+  }
+
+  .btn-login.fcbtn:hover .eff-3 {
+    top: 0;
+  }
+
+  .btn-login.fcbtn:hover a {
+    color: #fff;
+  }
+
+
   .btn-login.fcbtn,
   .btn-register.fcbtn,
   .btn-login-oauth.fcbtn,
@@ -155,11 +207,13 @@
     }
   }
 
+  /*
   .btn-login.fcbtn {
     .btn-label {
       background-color: rgba($danger, 0.4);
     }
 
+    &:hover,
     &:after {
       background-color: #7e4153;
     }
@@ -174,6 +228,7 @@
       background-color: #555;
     }
   }
+  */
 
   .btn-login-oauth.fcbtn#github {
     .btn-label {
@@ -225,6 +280,7 @@
       min-width: 45px;
     }
 
+    &:hover,
     &:after {
       background-color: #3f7263;
     }

src/server/views/login.html

@@ -134,13 +134,26 @@
           </div>
 
 
+          <div class="input-group justify-content-center mt-5">
+            <div class="input-group-prepend">
+
+              <button type="submit" class="fcbtn btn btn-login">
+                <div class="eff-3"></div>
+                <span class="btn-label"><i class="icon-login"></i>{{ t('Sign in') }}</span>
+              </button>
+
+            </div>
+          </div>
+
           <div class="input-group justify-content-center mt-5">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="fcbtn btn btn-login">
-              <span class="btn-label"><i class="icon-login"></i></span>
-              {{ t('Sign in') }}
+
+            <button type="submit" class="btn button-3 fcbtn">
+              <div class="eff-3"></div>
+              <span class="btn-label"><i class="icon-login"></i>{{ t('Sign in') }}</span>
             </button>
           </div>
+
         </form>
         {% endif %}