C'est terrible de faire des jolis boutons

brythonRunner/css/all.css

@@ -4,21 +4,22 @@
 
 html{
     height: 100%;
+    background-image: url(../page/palin.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
+
 body{
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-around;
     align-items: stretch;
-    /* height: 100%; */
+    height: 98%;
-    height: 100%;
+    margin-top: 10px;
-    margin: 0;
     padding: 0;
 }
 
-
 div.enigme{
     width: 25%;
     height: 100%;
@@ -27,11 +28,80 @@ div.enigme{
 }
 
 div.editor_class{
-    width: 50%;
+    width: 45%;
     min-height: 100%;
     margin-bottom: 0;
+    margin-right: 10px;
 }
 
 div.compiler_class{
-    width: 25%;
+    width: 30%;
-}
+}
+
+textarea {
+    font-size: .8rem;
+    letter-spacing: 1px;
+}
+textarea {
+    padding: 10px;
+    max-width: 95%;
+    max-height: 50%;
+    line-height: 1.5;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px #999;
+}
+
+@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
+
+
+div.compiler_class.container {
+  width: 400px;
+  height: 400px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.right {
+  width: 180px;
+  height: 60px;
+}
+.left {
+    width: 180px;
+    height: 60px;
+    position: relative;
+}
+
+.btn {
+  width: 180px;
+  height: 60px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid #11f830;
+  outline: none;
+  transition: 0.5s ease-in-out;
+  color: white;
+  font-size: 18px;
+  font-weight: 100;
+  position: absolute;
+}
+
+svg {
+    left: 0;
+    top: 0;
+    stroke: #df0d0d;
+    stroke-dasharray: 150 480;
+    stroke-dashoffset: 150;
+    transition: 5s ease-in-out;
+}
+
+.btn:hover {
+  transition: 0.5s ease-in-out;
+  background: #11f830;
+  opacity: 50%;
+}
+
+.btn:hover svg {
+  stroke-dashoffset: -480;
+}

brythonRunner/css/test.css

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
+
+body, html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #5CA4EA;
+  overflow: hidden;
+  font-family: 'Lato', sans-serif;
+}
+
+.container {
+  width: 400px;
+  height: 400px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.center {
+  width: 180px;
+  height: 60px;
+  position: absolute;
+}
+
+.btn {
+  width: 180px;
+  height: 60px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid #91C9FF;
+  outline: none;
+  transition: 1s ease-in-out;
+}
+
+svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 150 480;
+  stroke-dashoffset: 150;
+  transition: 1s ease-in-out;
+}
+
+.btn:hover {
+  transition: 1s ease-in-out;
+  background: #4F95DA;
+}
+
+.btn:hover svg {
+  stroke-dashoffset: -480;
+}
+
+.btn span {
+  color: white;
+  font-size: 18px;
+  font-weight: 100;
+}

brythonRunner/page/palindrome.html

@@ -29,7 +29,26 @@
     return False
 	</div>
   <div class='compiler_class'>
-    <textarea id='console' readonly></textarea>
+    <textarea id='console' readonly rows="30" cols="100"></textarea>
+    <div class="container">
+      <div class="right">
+        <button onclick="run_init()" class="btn">Run
+          <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>
+        </button>
+      </div>
+      <!-- <div class="left">
+        <button onclick="submit()" class="btn">
+          <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>
 
   <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

brythonRunner/page/test.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Brython</title>
+  <link rel="stylesheet"href="../css/test.scss" />
+</head>
+<body>
+    <div class="container">
+        <div class="center">
+          <button class="btn">
+            <svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
+              <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>HOVER ME</span>
+          </button>
+        </div>
+      </div>
+</body>