2

introducir la descripción de la imagen aquí

Tengo un contenedor llamado .btn, lo que quiero realizar es rotar la flecha 90 grados cuando le haga hover al contenedor .btn

<div class="btn">
          <span>View my work</span>
          <i class="fas fa-chevron-right"></i>
        </div>

2 respuestas 2

3

Partiendo de la respuesta de Sebastián Miranda, pongo la solución solo con CSS. Cuando se sitúa el puntero sobre el botón el icono gira 90º:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style type="text/css">
        #flecha {
            font-weight: bold;
            position: relative;
            top: 8px;
        }
        .btn {
            padding: 0 12px 9px;
        }

        /* CSS solución */
        #flecha {
            -moz-transition: all 0.25s ease-out;
            -ms-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            -webkit-transition: all 0.25s ease-out;
        }
        #boton:hover #flecha {
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
    </style>
</head>
<body style="text-align:center">

        <button id="boton" class="btn">
            <span>Some text</span>
            <i id="flecha" class="material-icons">arrow_right_alt</i>
        </button>

</body>
</html>

2
  • 1
    buena, no sabía que se podía hacer así también Commented el 1 abr. 2019 a las 20:36
  • Muchas gracias chicos me ha servido de maravila, Commented el 3 abr. 2019 a las 19:44
3

te dejo un ejemplo que hice, espero te sirva:

Lo que hice fue que solo la flecha gire, fijate en el css, ahí le indico hacia dónde tiene que girar, si necesitas que sea en otra dirección tienes que cambiar los grados.

Saludos

pd: el nombre del botón y la flecha no quedaron centrados pero para temas didácticos sirve

#flecha {
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}



#flecha.rotamasmas {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container-fluid d-flex justify-content-center">
    <div class="row col-lg-6 d-flex justify-content-center">





       <button id="boton" class="btn btn-danger"> Importante <i id="flecha" class="material-icons ">arrow_right_alt</i></button>


    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script>
    
    $("#boton").hover(function(){
    $("#flecha").addClass("rotamasmas");
    },function(){
    $("#flecha").removeClass("rotamasmas");
    });
  </script>

</body>
</html>

Cambié el css y añadí jquery, y al final una función, de esta forma le digo "cuando pases sobre el botón, a la flecha agregale una clase y que cuando termine el hover saque la clase"

3
  • Hola Sebastian muchas gracias por el ejemplo, lo que queria realizar era que cuando le de hover al boton solo la flecha cambie, te muestro un ejemplo findmatthew.com . Saludos! Commented el 1 abr. 2019 a las 19:29
  • voy a modificar mi respuesta Commented el 1 abr. 2019 a las 19:52
  • 1
    ya está listo!! Commented el 1 abr. 2019 a las 20:02

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.