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
    el 4 ago. 2022 a las 23:01

Tu Respuesta

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

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