beautifull buttons

main
Lilian BRETON 2 years ago
parent 5087dc0633
commit 9b3549db53

@ -179,4 +179,37 @@ body {
.GoHome{ .GoHome{
margin-bottom: 10px; 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;
} }

@ -88,3 +88,36 @@ button:hover{
#chk:checked ~ .signup label{ #chk:checked ~ .signup label{
transform: scale(.6); 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;
}

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

@ -12,8 +12,11 @@
<div class="screen__content"> <div class="screen__content">
<form method="POST" name="goBackHome" id="GoHome"> <form method="POST" name="goBackHome" id="GoHome">
<input class="button" type="submit" value="Go Home"/> <button class="boutonHome">
<input type="hidden" name="action" value="goHome"/> <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>
<form class="login" method="POST" name="signUpForm" id="signUpForm"> <form class="login" method="POST" name="signUpForm" id="signUpForm">
@ -35,6 +38,13 @@
<i class="button__icon fas fa-chevron-right"></i> <i class="button__icon fas fa-chevron-right"></i>
</button> </button>
</form> </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>
<div class="screen__background"> <div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span> <span class="screen__background__shape screen__background__shape4"></span>

Loading…
Cancel
Save