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>
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>
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"