test

desktopB/index.html

@@ -286,7 +286,11 @@
                     </div>
                     <hr>
                     <div id="form-right">
-                        <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p></button>
+                        <div id="fb_login">
+                            <button  id="fb-button" scope="public_profile,email"
+                            onlogin="checkLoginState();"  ><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p></button>
+                        </div>
+                        <!-- <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p></button> -->
                         <!-- <div id="fb_login">
                             <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
                             </fb:login-button>

desktopB/style.css

@@ -349,7 +349,7 @@ body .arrow:hover {
   margin-left: 5vw;
 }
 
-#contact-us #contact-form #form-right #facebook {
+#contact-us #contact-form #form-right #fb-button {
   margin-top: 12px;
   width: 29vw;
   height: 50px;
@@ -364,11 +364,11 @@ body .arrow:hover {
   position: relative;
 }
 
-#contact-us #contact-form #form-right #facebook p {
+#contact-us #contact-form #form-right #fb-button p {
   line-height: 40px;
 }
 
-#contact-us #contact-form #form-right #facebook img {
+#contact-us #contact-form #form-right #fb-button img {
   position: absolute;
   left: 50px;
   top: 7px;
@@ -378,12 +378,12 @@ body .arrow:hover {
           filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
-#contact-us #contact-form #form-right #facebook:hover {
+#contact-us #contact-form #form-right #fb-button:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #form-right #facebook:hover img {
+#contact-us #contact-form #form-right #fb-button:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }

desktopB/style.scss

@@ -302,7 +302,7 @@ body {
             width: 29vw;
             margin-left: 5vw;
 
-            #facebook{
+            #fb-button{
                 margin-top: 12px;
                 width: 29vw;
                 height: 50px;

mobileB/style.css

@@ -413,7 +413,7 @@ body .arrow:hover {
   margin: 0 auto;
 }
 
-#contact-us #contact-form #facebook {
+#contact-us #contact-form #fb-button {
   border-radius: 3px;
   margin: 15px auto;
   width: 85vw;
@@ -426,7 +426,7 @@ body .arrow:hover {
   position: relative;
 }
 
-#contact-us #contact-form #facebook p {
+#contact-us #contact-form #fb-button p {
   position: absolute;
   right: 2vw;
   font-weight: normal;
@@ -434,7 +434,7 @@ body .arrow:hover {
 }
 
 @media screen and (max-width: 1024px) {
-  #contact-us #contact-form #facebook p {
+  #contact-us #contact-form #fb-button p {
     top: 2vw;
     right: 10vw;
     font-size: 20px;
@@ -442,13 +442,13 @@ body .arrow:hover {
 }
 
 @media screen and (max-width: 767px) {
-  #contact-us #contact-form #facebook p {
+  #contact-us #contact-form #fb-button p {
     top: 4vw;
     right: 1vw;
   }
 }
 
-#contact-us #contact-form #facebook img {
+#contact-us #contact-form #fb-button img {
   position: absolute;
   left: 30px;
   top: 15px;
@@ -458,16 +458,16 @@ body .arrow:hover {
           filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
-#contact-us #contact-form #facebook:hover {
+#contact-us #contact-form #fb-button:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #facebook:hover p {
+#contact-us #contact-form #fb-button:hover p {
   color: #fff;
 }
 
-#contact-us #contact-form #facebook:hover img {
+#contact-us #contact-form #fb-button:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }

mobileB/style.scss

@@ -319,7 +319,7 @@ body {
             display: block;
             margin: 0 auto;
         }
-        #facebook {
+        #fb-button{
             border-radius: 3px;
             margin: 15px auto;
             width: 85vw;