Premier prototype de page de choix a priori termine

2020-12-04 23:28:49 +01:00 · 2020-12-04 23:28:49 +01:00 · 2e20b02058
--- a/CSS/etrange_decouverte.css
+++ b/CSS/etrange_decouverte.css
@ -51,27 +51,41 @@ body {
            }

            .button {
+                outline: none;
+                border: 3px solid white;
+                border-radius: 50px;
+                height: 8vh;
+                min-width: 15vw;
+                padding: 0px 10px 0px 10px;
+                color: ;
                font-family: 'Special Elite', cursive;
-                border-radius: 20px;
-                background-color: #B0C4DE;
-                height: 3.8vh;
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
+                cursor : pointer;
            }

-            .button:hover{
-                animation-name: zslide;
-                animation-duration: 3s;
+            .button:hover {
+                box-shadow: 0 0 50px  #B0C4DE;
            }

-            @keyframes zslide {
+            .button:active {
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
+            }
+
+            @keyframes oscille {
                from {
-                    font-size: 2vw;
-                    opacity: 1;
+                    transform: rotate(0);
+                }
+
+                25% {
+                    transform: rotate(8deg);
+                }
+
+                75% {
+                    transform: rotate(-8deg);
                }

                to {
-                    font-size: 6vw;
-                    opacity: 0;
-
+                    transform: rotate(0);
                }
            }

--- a/HTML/etrange_decouverte.html
+++ b/HTML/etrange_decouverte.html
@ -7,6 +7,7 @@
    <link rel="stylesheet" href="../CSS/etrange_decouverte.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
+    <script defer type="text/javascript" src="../JAVASCRIPT/etrange_decouverte.js"></script>
 </head>
 <body>
    <header>
--- a/JAVASCRIPT/etrange_decouverte.js
+++ b/JAVASCRIPT/etrange_decouverte.js
@ -0,0 +1,4 @@
+let safeButton = document.getElementById("safeButton");
+
+
+console.log(safeButton);