0

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

1 respuesta 1

0

La etiqueta span es una etiqueta en línea, es decir, por defecto tiene la propiedad display: inline y la propiedad transform no aplica a elementos en línea.

La solución que puedes aplicar es cambiar la propiedad display del span a inline-block o block.

span {
  display: inline-block;
}

span:hover {
  transform: translateX(10px);
}
<button><span>Register</span></button>

3
  • muchísimas gracias Commented el 3 abr. 2020 a las 15:41
  • @SebastianRodriguezPenagos si te sirvió acéptala como respuesta. gracias
    – hawks
    Commented el 3 abr. 2020 a las 15:44
  • 1
    que pena es que no sabia como hacer eso, soy nuevo en stack overflow, y muchas gracias de nuevo Commented el 3 abr. 2020 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.