temporaly

src/client/styles/scss/_login.scss

@@ -130,6 +130,54 @@
 
   // button style
 
+  .fcbtn {
+    position: relative;
+    overflow: hidden;
+    color: white;
+    text-align: center;
+    cursor: pointer;
+    background-color: rgba(lighten(black, 20%), 0.4);
+    border: none;
+
+    .btn-label {
+      position: relative;
+      z-index: 1;
+      color: white;
+      text-decoration: none;
+      background-color: rgba($danger, 0.4);
+    }
+
+    .btn-label-text {
+      position: relative;
+      z-index: 1;
+      color: white;
+      text-decoration: none;
+    }
+
+    // effect
+    .eff {
+      position: absolute;
+      top: -50px;
+      left: 0px;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(#7e4153, 0.5);
+      transition: all 0.5s ease;
+    }
+
+    &:hover {
+      color: white;
+
+      .eff {
+        top: 0;
+      }
+    }
+  }
+
+  .fcbtn#github {}
+
+
   // login
   .btn-login {
     position: relative;
@@ -142,7 +190,7 @@
 
     .btn-label {
       position: relative;
-      z-index: 2;
+      z-index: 1;
       color: white;
       text-decoration: none;
       background-color: rgba($danger, 0.4);
@@ -150,7 +198,7 @@
 
     .btn-label-text {
       position: relative;
-      z-index: 2;
+      z-index: 1;
       color: white;
       text-decoration: none;
     }
@@ -168,7 +216,6 @@
     }
 
     &:hover {
-      z-index: 1;
       color: white;
 
       .eff-login {
@@ -534,7 +581,7 @@
 
     .btn-label {
       position: relative;
-      z-index: 2;
+      z-index: 1;
       color: white;
       text-decoration: none;
       background-color: rgba($success, 0.4);
@@ -542,7 +589,7 @@
 
     .btn-label-text {
       position: relative;
-      z-index: 2;
+      z-index: 1;
       color: white;
       text-decoration: none;
     }
@@ -560,7 +607,6 @@
     }
 
     &:hover {
-      z-index: 1;
       color: white;
 
       .eff-register {

src/server/views/login.html

@@ -147,6 +147,29 @@
                   <span class="btn-label-text p-3">{{ t('Sign in') }}</span>
                 </button>
               </div>
+
+              <div class="input-group justify-content-center d-flex mt-5">
+                <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                <button class="btn fcbtn px-0 py-2">
+                  <div class="eff"></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 d-flex mt-5">
+                <form role="form" action="/passport/github" class="d-inline-flex flex-column">
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <button type="submit" class="btn fcbtn px-0 py-2" id="github">
+                    <div class="eff-oauth-github"></div>
+                    <span class="btn-label p-3"><i class="fa fa-github"></i></span>
+                    <span class="btn-label-text p-3">{{ t('Sign in') }}</span>
+                  </button>
+                  <div class="small text-center">by GitHub Account</div>
+                </form>
+              </div>
+
+
             </form>
             {% endif %}