Animation des buttons

website/src/App.css

@@ -65,6 +65,8 @@ body {
       }
 }
 
+/* Animation CSS*/
+
 @keyframes blink {
     0%,
     22%,
@@ -250,8 +252,22 @@ body {
 }
 
 
+/* Main CSS */
+.main{
+  background-image: url(assets/img/banner.jpg);
+  height: 100vh;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+
+.row {
+justify-content: center;
+}
+
 
-/*MainPage CSS*/
+/*Title CSS*/
 
 .flicker {
   animation: shine 2s forwards, blink 3s 2s infinite;
@@ -261,19 +277,6 @@ body {
   animation: shine 2s forwards, blink 10s 1s infinite;
 }
 
-.main{
-    background-image: url(assets/img/banner.jpg);
-    height: 100vh;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-
-.row {
-  justify-content: center;
-}
-
 
 .sign h1 {
   font-weight: 700;
@@ -296,10 +299,17 @@ body {
 }
 
 
+/*Button CSS*/
+
+.main .enigme{
+  margin-top:150px;
+}
+
+
 .main a {
     margin-top: 60px;
     padding: 25px 30px;
-    color: #03e9f4;
+    color: #ff86ff;
     height: 50px;
     border: none;
     font-weight: 500;
@@ -319,11 +329,56 @@ body {
 }
 
 .main a:hover {
-  background: #03e9f4;
+  background: #ff86ff;
-  color: #050801;
+  color: #000000;
-  box-shadow: 0 0 5px #03e9f4,
+  box-shadow: 0 0 5px #ff86ff,
-              0 0 25px #03e9f4,
+              0 0 25px #ff86ff,
-              0 0 50px #03e9f4,
+              0 0 50px #ff86ff,
-              0 0 200px #03e9f4;
+              0 0 100px #ff86ff;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
 }
+
+a span{
+  position: absolute;
+  display: block;
+}
+
+
+a span:nth-child(1){
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg,transparent,#ff86ff);
+  animation: animate1 1s linear infinite;
+}
+
+a span:nth-child(2){
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg,transparent,#ff86ff);
+  animation: animate2 1s linear infinite;
+  animation-delay: 0.25s;
+}
+
+a span:nth-child(3){
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(270deg,transparent,#ff86ff);
+  animation: animate3 1s linear infinite;
+  animation-delay: 0.50s;
+}
+
+a span:nth-child(4){
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg,transparent,#ff86ff);
+  animation: animate4 1s linear infinite;
+  animation-delay: 0.75s;
+}

website/src/components/Main.js

@@ -2,7 +2,7 @@
 
 
 
-export const Banner = () => {
+export const Main = () => {
     return (
         <section className="main" id="home">
             <Container>
@@ -16,10 +16,16 @@ export const Banner = () => {
                     </Row>
                     <Col className="align-items-center">
                         <Row xl={6} md={5} xs={4} className="button">
-                            <a href="#" class="enigme" >Énigme</a>
+                            <a href="#" className="enigme">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                                Énigme
+                            </a>
                         </Row>
                         <Row xl={6} md={5} xs={4}>
-                            <a role="button" class="btn btn-outline-light disabled" href="#">Duel</a>    
+                            <a role="button" className="btn btn-outline-light disabled" href="#">Duel</a>    
                         </Row>
                     </Col>