9

Tengo unos botones con bootstrap 4 y mdb, estoy intentando que al pasar con el mouse tanto el icono como el texto se animen, pero solo funcionan si paso por encima de cada uno de ellos y no sobre el botón.

Código

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.icono:hover img {
  transform: scale(1.2);
}

b {
  transition: 0.5s ease-in-out 0s;
}

b:hover {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>

1
  • Muchas gracias a todos por su ayuda, me funciona ahora si como quería!!!!!
    – user119165
    el 28 feb. 2019 a las 15:58

4 respuestas 4

5

Tienes que poner el hover sobre el boton y luego "navegar" con los selectores al elemento que quieras animar a partir de ahi

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover .icono img {
  transform: scale(1.2);
}

b {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover b {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>

4

Tienes que poner el boton como el selector principal para que cuando se haga hover sobre el button, se le apliquen los estilos a la imagen y al texto que son los hijos:

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}


b {
  transition: 0.5s ease-in-out 0s;
}


/*-----------------------------------------------*/
button:hover img {
  transform: scale(1.2);
}

button:hover b{
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
</button>

3

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover .icono img {
  transform: scale(1.2);
}

b {
  transition: 0.5s ease-in-out 0s;
}

.btn:hover b {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>

A veces dudamos del potencial de CSS y quizás por ello no probemos cosas por pensar que no podría funcionar. He cambiado tus reglas CSS para los hover, de tal manera que primero se le vincula el hover al botón para posteriormente buscar el elemento al que la regla va a afectar realmente. En tu caso a la img y al b respectivamente.

Esto manera de seleccionar un elemento funciona porque el botón es padre de los dos elementos que deseamos afectar con la regla CSS Si la relación entre ellos fuese "más complicada" ya entraría en juego Javascript, que permite una mayor flexibilidad a la hora de seleccionar nuestros elementos en el DOM.

1
  • 2
    Buena respuesta. Esta es la forma más adecuada de trabajar con CSS en el ejemplo el 28 feb. 2019 a las 15:54
2

Saludos checa esto:

.primary_color {
  background-color: #dc1921;
}

.btn {
  width: 150px;
  height: 100px;
  padding: 1rem;
  font-size: 0.81rem;
  margin: .5rem 0;
  border: 0;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  white-space: normal;
  word-wrap: break-word;
  color: #fff;
}

.icono img {
  filter: invert(100%);
  width: 35px;
}

.icono img {
  transition: 0.5s ease-in-out 0s;
}

.icono:hover img {
  transform: scale(1.2);
}

button {
  transition: 0.5s ease-in-out 0s;
}

button:hover {
  letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
					<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
					<b>LANDSCAPE</b>
				</button>

fijate que solo estas aplicando mal es CSS deberia ser button no b en tus estilos, espero te sirva..!!

Tu Respuesta

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