Hola, soy nuevo en este foro, espero me puedan ayudar.
Mi idea que quiero plantear para un boton, es la de un contenedor tenga dentro del mismo otro contenedor de mitad tamaño con el mismo color pero una opacidad menor, para un efecto que quise crear.
La cuestión es que si logro hacer esto, pero cuando inserto el texto (que debe quedar completamente centrado), o me lo pone antes que el segundo contenedor, o me lo pone después y no en el centro.
¿A qué se debe esto?
El HTML y CSS que uso son los siguientes:
<button class="button">
<a href="#">
<div>
<div class="inner"> </div>
</div>
<div class="index">
REGISTRARSE
</div>
</a>
</button>
CSS
.button {
padding: 0px;
width: 166px;
height: 55px;
text-decoration: none;
font: bold 1.5em 'klavika_rgregular', helvetica, sans-serif;
display: inline-block;
text-align: center;
color: #FFF;
background-color: #00ACE4;
-moz-border-radius: .15em;
border-radius: .15em;
}
.inner{
margin: 1.5px;
width: 164px;
height: 22.5px;
background-color: rgba(250,250,250,.25);
-moz-border-radius: .15em;
border-radius: .15em;
}
.index{
margin: 0;
padding: 0px;
width: 166px;
height: 55px;
left:0px;
top:0px;
z-index:2;
}