SignamarcheixH
diff --git a/‎index.html
Lines changed: 2 additions & 1 deletion b/‎index.html
Lines changed: 2 additions & 1 deletion
diff --git a/‎scss/pages/index.scss
Lines changed: 39 additions & 6 deletions b/‎scss/pages/index.scss
Lines changed: 39 additions & 6 deletions
diff --git a/‎style.css
Lines changed: 37 additions & 6 deletions b/‎style.css
Lines changed: 37 additions & 6 deletions
diff --git a/‎style.css.map
Lines changed: 1 addition & 1 deletion b/‎style.css.map
Lines changed: 1 addition & 1 deletion
@@ -8,8 +8,9 @@
     </head>
     <body>
         <h1>Javascript workers in action</h1>
+        <p>Click on the pokeball and see which Pokemon you catched !</p>
         <div class="container">
-            <button id="refresh" class="btn">Générer un Pokémon</button>
+            <button id="refresh" class="btn"><span></span></button>
             <div id="text-placeholder" class="is-empty">
                 <img class="sprite" src="">
                 <div>Name : <span class="name"></span></div>
 
@@ -1,19 +1,52 @@
-h1 { font-family: sans-serif; }
+h1,p { 
+	font-family: sans-serif;
+	text-align: center;
+}
 
 .container {
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	#refresh {
-		width: 30%;
-		padding: 10px;
-		background-color: #268fc3;
-		color: white;
+		position: relative;
+		padding: 20px;
+		background-color: red;
+		color: black;
 		font-size: 16px;
-		border-radius: 5px;
+		border-radius: 50px;
+		border: 2px solid black;
 		outline: none;
 	    margin-bottom: 20px;
+	    &::before {
+	    	content: '';
+	    	position: absolute;
+	    	bottom: 0;
+	    	left: 0;
+	    	background-color: white;
+	    	border-bottom-left-radius: 50px;
+	    	border-bottom-right-radius: 50px;
+	    	height: 50%;
+	    	width: 100%;
+	    }
+	    &::after {
+	    	content: '';
+	    	position: absolute;
+	    	top: 50%;
+	    	left: 50%;
+	    	transform: translate(-50%,-50%);
+	    	width: 7px;
+	    	height: 7px;
+	    	border: 2px solid black;
+	    	border-radius: 50%;
+	    }
+	    span {
+	    	position: absolute;
+	    	top: 50%;
+	    	left: 50%;
+	    	transform: translate(-50%,-50%);
+	    	font-weight: bold;
+	    }
 	}
 	#text-placeholder {
 		display: flex;