Login button Home page

WEB/src/CSS/Home.css

@@ -252,7 +252,7 @@ body {
 }
 
 .sign{
-  margin-bottom: 130px;
+  margin-bottom: 50px;
 }
 
 
@@ -278,21 +278,15 @@ body {
 }
 
 
-/*Main Button CSS*/
 
 
-.main .duel{
-  color: #56fcfc;
-}
-.log{
-  color: #fff;
-}
+/*Main Button CSS*/
 
 .main .duel{
   margin-top: 60px;
 }
 
-.main a {
+.main .align-items-center a {
     letter-spacing: 0.2rem;
     padding: 25px 30px;
     color: #ff86ff;
@@ -312,21 +306,17 @@ body {
     overflow: hidden;
 }
 
+.main .align-items-center .duel{
+  color: #56fcfc;
+}
+
+
 .align-items-center{
   display: table;
   margin: auto;
 }
 
-.main .duel:hover{
-  background: #56fcfc;
-  color: #000000;
-  box-shadow: 0 0 5px #56fcfc, 
-              0 0 25px #56fcfc, 
-              0 0 50px #56fcfc, 
-              0 0 100px #56fcfc;
-}
-
-.main a:hover {
+.main .align-items-center .enigme:hover {
   background: #ff86ff;
   color: #000000;
   box-shadow: 0 0 5px #ff86ff,
@@ -334,9 +324,19 @@ body {
               0 0 50px #ff86ff,
               0 0 100px #ff86ff;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
+}
 
+.main .align-items-center .duel:hover{
+  background: #56fcfc;
+  color: #000000 !important;
+  box-shadow: 0 0 5px #56fcfc, 
+              0 0 25px #56fcfc, 
+              0 0 50px #56fcfc, 
+              0 0 100px #56fcfc;
+  -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
 }
 
+
 .main a span{
   position: absolute;
   display: block;
@@ -397,3 +397,54 @@ a span:nth-child(4){
   animation: animate4 1s linear infinite;
   animation-delay: 0.75s;
 }
+
+
+/* LogIn Button Css */
+
+.main .align-items-center #login{
+  display: flex;
+  justify-content: center;
+}
+
+.main .align-items-center .log{
+  color: #ffffff;
+  margin-bottom: 60px;
+  width: 140px;
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.main .align-items-center .log:hover{
+  background: #6090d1;
+  color: #000000 !important;
+  transition-delay: 450ms;
+  box-shadow: 0 0 5px #6090d1, 
+              0 0 25px #6090d1, 
+              0 0 50px #6090d1, 
+              0 0 100px #6090d1;
+  -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
+}
+
+.main .align-items-center .log:before,
+.main .align-items-center .log:after{
+  content:'';
+  position:absolute;
+  top:0;
+  right:0;
+  height:2px;
+  background: #6090d1;
+  width:0;
+    box-shadow:  0 0 5px #6090d1,  0 0 5px #6090d1 inset;
+  transition:400ms ease all;
+}
+.main .align-items-center .log:after{
+  right:inherit;
+  top:inherit;
+  left:0;
+  bottom:0;
+}
+.main .align-items-center .log:hover:before,
+.main .align-items-center .log:hover:after{
+  width:100%;
+  transition:800ms ease all;
+}

WEB/src/CSS/LogSign.css

@@ -227,5 +227,3 @@ body {
   margin-left: 25%;
   margin-top: 2% ;
 }
-
-/* Home Button */

WEB/src/pages/Home.html

@@ -17,10 +17,12 @@
                 <span>ed</span>
             </h1>
         </div>
-        <button>
-            <img href="./LogSign/Login.html" src="../../assets/img/conexion-icon.jpg"/>
-        </button>
         <div class="align-items-center">
+            <div id="login">
+                <a href="./LogSign/Login.html" class="log">
+                    LOgin
+                  </a>
+            </div>
             <div>
                 <a class="enigme" href="./Presentation.html">
                     <span></span>
@@ -36,7 +38,7 @@
                     <span></span>
                     <span></span>
                     <span></span>
-                    Duel
+                    Multi
                 </a>
             </div>
         </div>