Set button for palindrome

WEB/src/CSS/enigme.css

@@ -35,7 +35,7 @@
   }
   
 @media (min-width:1700px) {
-      main .container {
+      main .buttons {
           max-width: 100%;
           padding: 0 150px;
       }
@@ -45,7 +45,7 @@
 /* Main CSS */
 html{
   scroll-behavior: smooth;
-  background-image: url(../../assets/img/Background4.png);
+  background-color: black;
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
@@ -53,14 +53,12 @@ html{
 }
 
 
-
-
 body{
     display: flex;
     font-family: "Orbitron" , sans-serif;
     flex-direction: row;
     align-items: stretch;
-    height: 98%;
+    height: 100%;
     margin-top: 10px;
     padding: 0;
 }
@@ -87,45 +85,96 @@ textarea {
     font-size: .8rem;
     letter-spacing: 1px;
 }
-textarea {
+#console {
     padding: 10px;
+    margin: 10px;
     max-width: 95%;
     max-height: 50%;
     line-height: 1.5;
     border-radius: 5px;
     border: 1px solid #ccc;
-    box-shadow: 1px 1px 1px #999;
 }
 
 
-.compiler_class.container {
+/* Button Css */
-  width: 400px;
+
-  height: 400px;
+.buttons{
   display: flex;
-  flex-direction: row;
+    justify-content: center;
-  align-items: stretch;
+    align-items: center;
-}
+    flex-direction: column;
+  }
 
-.right {
+.compiler_class .buttons div{
-  width: 180px;
+  display: flex;
-  height: 60px;
 }
-.left {
+
-    width: 180px;
+.buttons button{
+  position: relative;
+    width: 120px;
     height: 60px;
-    position: relative;
+    display: inline-block;
-}
+    background: transparent;
+    margin: 20px;
+  }
+
+.buttons button:before, .buttons button:after
+{
+  content:'';
+    position: absolute;
+    inset: 0;
+    transition: 0.5s;
+    background: #f00
+  }
 
-.btn {
+.buttons button:nth-child(1):before, .buttons button:nth-child(1):after
-  width: 180px;
+  {
-  height: 60px;
+   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4)
-  cursor: pointer;
+  }
-  background: transparent;
+
-  border: 1px solid #11f830;
+.buttons button:nth-child(2):before, .buttons button:nth-child(2):after
-  outline: none;
+  {
-  transition: 0.5s ease-in-out;
+    background: linear-gradient(45deg, #f0075b, #0e1538, #1aff22);
-  color: white;
+  }
-  font-size: 18px;
+
-  font-weight: 100;
+.buttons button:hover:before
-  position: absolute;
+  {
+    inset: -3px;  
+  }
+
+.buttons button:hover:after
+  {
+    inset: -3px;  
+    filter: blur(10px);
+  }
+
+.buttons button span{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    background: #0e1538;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2em;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #fff;
+    border: 1px solid #040a29;
+    overflow: hidden;
+  }
+
+.buttons button span::before{
+  content:'';
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255,255,255,0.075);
+      transform: skew(25deg)
 }

WEB/src/pages/Enigme/palindrome.html

@@ -12,7 +12,7 @@
     
   </div>
   <div class="enigme">
-	  <p>
+	  <p class="enonce">
       Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. 
 		</p>
   </div>
@@ -33,26 +33,32 @@
 	</div>
   <div class='compiler_class'>
     <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="container">
+    <div class="buttons">
-      <div class="right">
+      <div>
-        <button onclick="run_init()" class="btn">Run</button>
+        <button onclick="run_init()">
-      </div>
+          <span>Run</span>
-      <!-- <div class="left">
+        </button>
-        <button onclick="submit()" class="btn">
+        <button onclick="submit()">
-          <svg width="180px" height="60px" viewBox="0 0 180 60">
-            <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
-            <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
-          </svg>
           <span>Submit</span>
         </button>
-      </div> -->
+      </div>
     </div>
   </div>
   
+
+
+
+
+
+
+
+
+
+
+  
   <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
   <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../JS/base.js"></script>
   <script src="../../JS/palindrome.js"></script>
-
 </body>
 </html>