0

Quiero crear un efecto en donde de derecha a izquierda aparezcan dos lineas blancas en diagonal o rectas cuando se pase el mouse sobre el boton, imagen de ejemplo:

introducir la descripción de la imagen aquí

No soy bueno con las animaciones, solo tengo el boton:

.boton{
  background-color: #ffb618;
  color: #fff;
  font-size: 30px;
  border-radius: 6px;
  width: 300px;
  height: 150px;
}
<div className='boton'>Boton</div>

1 respuesta 1

1

Usa los pseudoselectores before y after, cada uno te permite colocar una banda. Luego con :hover modificas las inclinaciones. El CSS que necesitas es

.boton{
  position: relative;
  background-color: #ffb618;
  color: #fff;
  font-size: 30px;
  border-radius: 6px;
  width: 300px;
  height: 150px;
}
  .boton:after, .boton:before{
    content:'';
    position: absolute;
    width: 15%;
    height: 100%;
    top:0;
    left: 30%;
    background: #fde0a0f7;
    transform: skew(-30deg, 0deg);
    transition: 300ms;
  }
  .boton:before{
    width: 10%;
    left: 55%;  
  }  
  .boton:hover:after, .boton:hover:before{
    transform: skew(0,0)
  }  

Y en esta página puedes verlo funcionando

1
  • Me parece super util tu comentario porque no sabia como hacer las lineas, gracias
    – Camilo SW
    Commented el 4 ago. 2022 a las 23:01

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.