0
237
Vistas¿Cómo elimino este error gráfico para este botón?
Soy nuevo en el desarrollo web y tengo un error que parece que no puedo solucionar. Básicamente, tengo un botón que se destaca cuando se desplaza y funciona, pero hay un pequeño contorno del color original cuando se desplaza. Estoy bastante seguro de que esto no se debe a un contorno o un borde. El error se muestra en la imagen proporcionada. Aquí está el código:
body { background-color: #2d2f31; } .start{ width: 200px; height: 75px; border: none; color:black; background-color: beige; border-radius: 50px; box-shadow: inset 0 0 0 0 rgb(36, 36, 37); font-size: 15px; outline: 0; transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; } .start:hover{ box-shadow: inset 200px 0 0 0 rgb(36, 36, 37); color: white; } <div class=buttondiv> <button onclick="coming('maintext', '#F0F');" class='start' >button</button> </div> 
EDITAR: estoy usando Google Chrome y Windows 11 (no sé si el sistema operativo es importante)
2 Respuestas
Responde la pregunta0
La sombra del cuadro es ligeramente transparente alrededor de esas esquinas, lo que le permite ver el color de fondo beige debajo. Cambiar el color de fondo del botón al pasar el mouse al mismo color que la sombra del cuadro soluciona esto. El efecto es ligeramente diferente, pero realmente no puedo decirlo con solo mirarlo.
Además, en Chrome, esta transición de sombra de cuadro parpadea. Jugué con él y cambié el cuarto número a 1px y dejó de parpadear. No podría decirte por qué, pero ahí lo tienes.
.start:hover{ background: rgb(36, 36, 37); box-shadow: inset 200px 0 0 1px rgb(36, 36, 37); color: white; } body { background-color: #2d2f31; } .start{ width: 200px; height: 75px; border: none; color:black; background-color: beige; border-radius: 50px; box-shadow: inset 0 0 0 0 rgb(36, 36, 37); font-size: 15px; outline: 0; transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; overflow: hidden; } .start:hover{ background: rgb(36, 36, 37); box-shadow: inset 200px 0 0 1px rgb(36, 36, 37); color: white; } <div class=buttondiv> <button onclick="coming('maintext', '#F0F');" class='start' >button</button> </div>0
Acabo de entender por qué es así. Es por tu fondo "beige". Cuando lo cambio a "rojo" mira como queda
botón de fondo rojo
Solución: vamos a dar un fondo cuando se usa el estado de desplazamiento
Entonces tu código será como
.start:hover{ box-shadow: inset 200px 0 0 0 rgb(36, 36, 37); color: white; background: rgb(36,36,37); }Déjame saber cómo es