Hola es mi primera pregunta. Estoy aprendiendo algo de desarrollo web, trato de hacer un formulario implementando algunos conceptos de flex-box, entonces deseo realizar una pequeña animación en los botones, que al acercar el ratón a los botones llamados ‘Register’ y ‘sign up’, las letras se muevan un poco hacia la derecha sin deformar el tamaño de la caja que forma el botón, intente usando “transform: translateX(1rem);” en la etiqueta span:hover pero no realiza algún tipo de cambio. Cualquier tipo de sugerencia es bien recibida.
body{
background-image: url(fondo.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: sans-serif;
}
.container{
display: flex;
width: 40%;
background-color: #fff;
margin: 4rem auto;
justify-content: space-between;
flex-direction: column;
height: 24rem;
border-radius: 1rem;
}
h2{
text-transform: uppercase;
font-size: 2rem;
color: #414141;
padding: 1rem;
}
form{
display: flex;
flex-direction: column;
padding: 1rem;
}
form input{
margin-bottom: 1rem;
padding: 1rem;
border: none;
background: none;
border-bottom: 0.0625rem solid #858585;
text-transform: uppercase;
}
form input:hover::placeholder{
color: orangered;
transform: translateY(-1rem);
transition: 0.5s;
}
form input:hover{
border-bottom: 0.0625rem solid orangered;
}
a{
text-align: center;
text-decoration: none;
color: #858585;
font-size: 1.4rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.buttons{
display: flex;
justify-content: space-between;
}
button{
height: 3.2rem;
width: 50%;
border: none;
text-transform: uppercase;
}
button:hover{
cursor: pointer;
/*transform: scale(0.95);*/
}
.register{
background-color: #673ab7;
border-bottom-left-radius: 1rem;
}
.signup{
background-color:#ff5722;
border-bottom-right-radius: 1rem;
}
span:hover{
/*aca y otros selectores he estado usando transform: translateX(10px); sin mucho exito*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Haciendo un formulario</title>
<link rel="stylesheet" href="making-form.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="">
<input type="text" placeholder="email" class="email">
<input type="text" placeholder="password" class="pwd">
</form>
<a href="#">forgot your password?</a>
<div class="buttons">
<button class="register"><span>register</span></button>
<button class="signup"><span>sign up</span></button>
</div>
</div>
</body>
</html>
texto en negrita