2

Este es mi código:

.a {
  /*BOTONES NORMALES*/
  color: black;
  background-color: white;
  font-size: 150%;
  font-family: Oswald;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
<a class="btn a" href="menu">MENU</a>

1 respuesta 1

3

Pues puedes establecer el color de fondo con opacidad de enviando su valor en distintas formas:

rgba

.a{
    color: black;
    background-color: rgba(0, 255, 0, 0.2); // un verde con opacidad
    font-size: 150%;
    font-family: Oswald;
}

hsla

.a{
    color: black;
    background-color: hsla(120, 100%, 50%, 0.3); // un verde con opacidad
    font-size: 150%;
    font-family: Oswald;
}

Ejemplo:

#rgba {
  color: black;
  background-color: rgba(0, 255, 0, 0.1);
  font-size: 150%;
  font-family: Oswald;
  padding: 15px;
  text-decoration: none;
}

#hsla {
  color: black;
  background-color: hsla(120, 100%, 50%, 0.1);
  font-size: 150%;
  font-family: Oswald;
  padding: 15px;
  text-decoration: none;
}


/* estilos de fondo para ver la transparencia */

h1 {
  margin: 5px 0;
  padding: 0;
  text-shadow: 1px 1px 1px #fff;
}

div {
  border: 1px solid transparent;
  padding: 10px;
  margin: 10px;
}

#fondoB {
  background: #fff;
}

#fondoI {
  background-image: url(https://picsum.photos/g/600?random);
  background-size: cover;
  background-position: center;
}

#fondoG {
  background: linear-gradient(to right, #fff 0%, #fff 10%, #ccc 10%, #333 20%, #fff 20%, #fff 100%);
}
<div id="fondoB">
  <h3>Fondo Blanco</h3>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>

<div id="fondoG">
  <h3>Fondo Gradient</h3>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>

<div id="fondoI">
  <h3>Fondo con imagen</h3>
  <h5>Verde con opacidad al 1% usando rgba</h5>
  <a id="rgba" class="btn a" href="menu">MENU</a>

  <h5>Verde con opacidad al 1% usando hsla</h5>
  <a id="hsla" class="btn a" href="menu">MENU</a>
</div>


Referencia sobre colores CSS

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.