beautifull buttons

Style/signInStyle.css

@@ -179,4 +179,37 @@ body {
 
 .GoHome{
 	margin-bottom: 10px;
+} 
+
+.bouton{
+	width: 20%;
+	height: 30px;
+	margin: 10px auto;
+	justify-content: center;
+	display: block;
+	color: #fff;
+	background: #573b8a;
+	font-size: 1em;
+	font-weight: bold;
+	margin-top: 20px;
+	outline: none;
+	border: none;
+	border-radius: 25px;
+	transition: .2s ease-in;
+	cursor: pointer;
+} 
+
+.boutonHome{
+	width: 30%;
+	justify-content: left;
+	display: block;
+	color: #fff;
+	background: #573b8a;
+	font-size: 1em;
+	font-weight: bold;
+	margin-top: 20px;
+	outline: none;
+	border: none;
+	border-radius: 25px;
+	padding-bottom: 3px;
 } 

Style/signUp.css

@@ -88,3 +88,36 @@ button:hover{
 #chk:checked ~ .signup label{
 	transform: scale(.6);
 }
+
+.bouton{
+	width: 20%;
+	height: 30px;
+	margin: 10px auto;
+	justify-content: center;
+	display: block;
+	color: #fff;
+	background: #573b8a;
+	font-size: 1em;
+	font-weight: bold;
+	margin-top: 20px;
+	outline: none;
+	border: none;
+	border-radius: 25px;
+	transition: .2s ease-in;
+	cursor: pointer;
+} 
+
+.boutonHome{
+	width: 30%;
+	justify-content: left;
+	display: block;
+	color: #fff;
+	background: #573b8a;
+	font-size: 1em;
+	font-weight: bold;
+	margin-top: 20px;
+	outline: none;
+	border: none;
+	border-radius: 25px;
+	padding-bottom: 3px;
+} 

Vues/signIn.php

@@ -12,9 +12,13 @@
 		<div class="screen__content">
 
 			<form method="POST" name="goBackHome" id="GoHome">
-				<input class="button" type="submit" value="Go Home"/>
-                <input type="hidden" name="action" value="goHome"/>
+				<button class="boutonHome">
+					<span class="button__text">Go Home</span>
+					<input type="hidden" name="action" value="goHome"/>
+					<i class="button__icon fas fa-chevron-right"></i>
+				</button>
             </form>
+			
 			<form class="login" method="POST" name="signUpForm" id="signUpForm">
 				<div class="login__field">
 					<i class="login__icon fas fa-user"></i>
@@ -30,13 +34,13 @@
 					<input type="hidden" name="action" value="signIn"/>
 					<i class="button__icon fas fa-chevron-right"></i>
 				</button>	
-
-				
-
 			</form>
-			<form class="login" method="POST" name="signUpForm" id="signUpForm">
-				<input class="button" type="submit" value="Sign Up"/>
-				<input type="hidden" name="action" value="accessSignUp"/>
+			<form class="droite" method="POST" name="signUpForm" id="signUpForm">
+				<button class="bouton" type="submit">
+					<span class="button__text">Sign up</span>
+					<input type="hidden" name="action" value="accessSignUp"/>
+					<i class="button__icon fas fa-chevron-right"></i>
+				</button>
 			</form>
 		</div>
 		<div class="screen__background">

Vues/signUp.php

@@ -12,8 +12,11 @@
 		<div class="screen__content">
 
 			<form method="POST" name="goBackHome" id="GoHome">
-				<input class="button" type="submit" value="Go Home"/>
-                <input type="hidden" name="action" value="goHome"/>
+				<button class="boutonHome">
+					<span class="button__text">Go Home</span>
+					<input type="hidden" name="action" value="goHome"/>
+					<i class="button__icon fas fa-chevron-right"></i>
+				</button>
             </form>
 
 			<form class="login" method="POST" name="signUpForm" id="signUpForm">
@@ -35,6 +38,13 @@
 					<i class="button__icon fas fa-chevron-right"></i>
 				</button>				
 			</form>
+			<form class="droite" method="POST" name="signIn" id="SignIn">
+				<button class="bouton" type="submit">
+					<span class="button__text">Sign in</span>
+					<input type="hidden" name="action" value="accessSignIn"/>
+					<i class="button__icon fas fa-chevron-right"></i>
+				</button>
+            </form>
 		</div>
 		<div class="screen__background">
 			<span class="screen__background__shape screen__background__shape4"></span>