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>
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>