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 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
    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. 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
    el 29 ene. 2021 a las 17:25

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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