0

EJEMPLO

Me gustaria poder crear un menu con botones como este. La idea es utilizar usar imágenes de un sprite.

¿Como podría añadirle a la imagen del sprite el fondo redondo de color?

Ya he encontrado la solución. Os dejo el codigo para quien le sirva.

Este será el boton en HTML:

<div class="boton"><a class="burguer" href="#"></a></div>

Luego el estilo será el siguiente:

.boton{
  width:60px;
  height:60px;
  background-color:#03800b;
  margin: 5px;
  padding:10px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  font-size:11px;
  line-height:32px;
  text-transform: uppercase;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boton:hover{
  opacity: 0.50;
  -moz-opacity: .50;
  filter:alpha (opacity=50);
}

Con eso tenemos un circulo con el fondo verde.

Ahora nos queda añadirle dentro la imagen que proviene de un sprite:

.boton .burguer{
      width: 32px; height: 32px;
    background: url('/sprites1.png') -10px -10px;
       margin-top: 10px;
       text-align: center;
           display: inline-block;
                margin:0px auto;

}

Y de esta forma, tenemos un botón usando una imagen de un sprite.

3
  • 1
    Añade el código que tengas hasta ahora
    – Rodrigo
    Commented el 28 ene. 2021 a las 18:39
  • Hola! Bienvenidx a SOes. Las preguntas del tipo "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas, ya que la respuesta será siempre adivinando y no encaja en el formato del sitio. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    Commented el 28 ene. 2021 a las 18:56
  • Si, ya he añadido el codigo. El codigo es el final, ya que dando vueltas saque el resutado final. Commented el 29 ene. 2021 a las 17:19

1 respuesta 1

2

Creando un botón

Puedes crear un <div>, darle un border-radius y ponerle un color de fondo con CSS, ponle un float si no va a tener posición fija

.sprite {
  background:red;
  border-radius:50%;
  position:fixed;
}
<div class="sprite">
  <img src="https://img.icons8.com/pastel-glyph/2x/hamburger.png" height="75" width="75">
</div>

Añadiendo el menú

Puedes hacerlo con JavaScript y un transform para añadirle animación

Al expandir el menú, le quitaremos el border-radius para prevenir que se vea raro

Cuando se haga click en el botón para expandir el menú, se quitará el border-radius y se expandirá el menú

document.querySelector(".sprite > img").addEventListener("click", () => {
  const el = document.querySelector(".sprite > .menu");
  if (el.getAttribute("style")) {
    el.removeAttribute("style");
    setTimeout(() => {
      document.querySelector(".sprite").removeAttribute("style");
    }, 300);
  } else {
    document.querySelector(".sprite").style.borderRadius = "0";      
    el.style.transform = "scale(1,1)";
    el.style.position = "relative";
  }
});
.sprite {
  background:red;
  border-radius:50%;
  position:fixed;
}

.menu {
  background:blue;
  transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  position:absolute;
  transition:0.3s;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -o-transition:0.3s;
  transform-origin:top center;
  -webkit-transform-origin:top center;
  -moz-transform-origin:top center;
  -o-transform-origin:top center;
}
<div class="sprite">
  <img src="https://img.icons8.com/pastel-glyph/2x/hamburger.png" height="75" width="75">
  <div class="menu">
    <p><img src="https://img.icons8.com/pastel-glyph/2x/hamburger.png" height="75" width="75"></p>
  </div>
</div>

1
  • Buena respuesta, resuelve lo del círculo, pero sería bueno poner un ejemplo usando sprites. +1
    – Triby
    Commented el 29 ene. 2021 a las 17:25

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.