El tema existe en Stackoverflow pero no entiendo mi problema en CSS.

¿Cómo puedo cambiar el color de un botón al pasar el mouse?

Tengo un botón login, cuando deseo desplazar el botón. Debería aparecer un fondo blanco.

Me sale un pequeño color de fondo.

body{

    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
      
}
 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}


.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}



.btn-login a:hover {
	color: black;
	background-color: #FFF;
}
<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>
css
0
alain 15 may. 2020 a las 16:16

6 respuestas

La mejor respuesta

Cambie para que pase el botón y no la etiqueta para cambiar el fondo. Y luego debes cambiar el color de la etiqueta. Ejemplo css a continuación.

.btn-login:hover {
    background-color: #FFF;
}

.btn-login:hover a {
     color: black;
}
3
Maddoxswe 15 may. 2020 a las 13:26

Debe usar ".btn-login: hover" en lugar de ".btn-login a: hover", esto funcionará.

1
amirmasud111 15 may. 2020 a las 13:24

Está configurando el desplazamiento sobre su etiqueta a, es por eso que su color de fondo cambia cuando coloca el cursor sobre a. Puede cambiar de la siguiente manera:

body{

    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
      
}
 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}


.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}


/* Here are the modified css */
.btn-login:hover {
	color: black;
	background-color: #FFF;
}

.btn-login:hover a {
  color: #000;
}
<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>
0
Quentin Grisel 15 may. 2020 a las 13:26

Se le da el efecto de desplazamiento al interior del botón. Es por eso que solo a está cambiando el color al pasar el mouse. Cambia la línea a:

.btn-login:hover {
   background-color: #ffffff;  ( Your desired color )
}
0
Jithin B 15 may. 2020 a las 13:28

El problema aquí es que no estás usando un botón sino un elemento <a>, por lo que cuando cambias el fondo del elemento <a> solo cambia el fondo de la escritura. Para cambiar el fondo de todo el botón 'pseudo' necesita cambiar el color de fondo del <div> que contiene el elemento <a> mientras cambia también el elemento <a>.

Su código modificado de acuerdo con lo que se dijo anteriormente:

body{
    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative; 
}

 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}

.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}

.btn-login:hover{
	color: black;
	background-color: #FFF;
}

.btn-login:hover a{
	color: black;
}
<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>
0
Riccardo Chimisso 15 may. 2020 a las 13:53

Debe cambiar el color de fondo de .btn-login no .btn-login a

.btn-login:hover {
   background-color: #FFF;
}
0
atman_lens 15 may. 2020 a las 13:24