[SOLUCIONADO] Problema al crear boton con Div

[edu_leon93]

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

[C2am]

Hola y bienvenido
No sé que pretendes hacer, pero te dejo pequeño ejemplo de boton css.
Supongo que tendrá cosas a corregir, pero bue:

Código HTML:

<div class="button">
<a href="#"> 
    REGISTRARSE
</a> 
</div>
 

Código CSS:

.button {
    width: 300px;
    height: 55px;
    display: inline-block;
    text-align: center;
    background-color: #00ACE4;
    border-radius: .15em;
    vertical-align:middle;
    position:relative;
}
 
div.button:before{
    content:"";
    display:block;
    width:296px;
    height: 22.5px;
    color:black;
    border-radius: .15em;
    background-color: rgba(250,250,250,.6);
    position:absolute; left: 2px; top:2px;
    
    -webkit-transition: top .5s -.1s;
     -moz-transition: top .5s -.04s;
     -o-transition: top .5s -.04s;
     -ms-transition: top .5s -.04s;
      transition: top .5s -.04s;
}
 
 
.button a{
    color: #FFF; 
    display:block;
    font: bold 1.5em 'klavika_rgregular', helvetica, sans-serif; 
    height:55px;
    line-height:55px;
    position:relative;
    text-decoration: none;
    text-shadow:1px 1px 1px #333;
    width:100%;
    z-index:100;
    
        -webkit-transition: color .5s;
     -moz-transition: color .5s -.04s;
     -o-transition: color .5s -.04s;
     -ms-transition: color .5s -.04s;
      transition: color .5s;
}
div.button:hover:before{
    background-color: rgba(250,250,250,.3);
    top:30.5px;
}
.button a:hover{
    color:#333;
    text-shadow:-1px -1px 1px #eee;
}
 

Y un ejemplo: http://jsfiddle.net/c2am/G4bHV/138/embedded/result/

Sobre el uso de pseudo elementos: http://librosweb.es/css_avanzado/cap...elementos.html

Saludos

[edu_leon93]

Iniciado por C2am

Hola y bienvenido
No sé que pretendes hacer, pero te dejo pequeño ejemplo de boton css.
Supongo que tendrá cosas a corregir, pero bue:

Código HTML:

<div class="button">
<a href="#"> 
    REGISTRARSE
</a> 
</div>
 

Código CSS:

.button {
    width: 300px;
    height: 55px;
    display: inline-block;
    text-align: center;
    background-color: #00ACE4;
    border-radius: .15em;
    vertical-align:middle;
    position:relative;
}
 
div.button:before{
    content:"";
    display:block;
    width:296px;
    height: 22.5px;
    color:black;
    border-radius: .15em;
    background-color: rgba(250,250,250,.6);
    position:absolute; left: 2px; top:2px;
    
    -webkit-transition: top .5s -.1s;
     -moz-transition: top .5s -.04s;
     -o-transition: top .5s -.04s;
     -ms-transition: top .5s -.04s;
      transition: top .5s -.04s;
}
 
 
.button a{
    color: #FFF; 
    display:block;
    font: bold 1.5em 'klavika_rgregular', helvetica, sans-serif; 
    height:55px;
    line-height:55px;
    position:relative;
    text-decoration: none;
    text-shadow:1px 1px 1px #333;
    width:100%;
    z-index:100;
    
        -webkit-transition: color .5s;
     -moz-transition: color .5s -.04s;
     -o-transition: color .5s -.04s;
     -ms-transition: color .5s -.04s;
      transition: color .5s;
}
div.button:hover:before{
    background-color: rgba(250,250,250,.3);
    top:30.5px;
}
.button a:hover{
    color:#333;
    text-shadow:-1px -1px 1px #eee;
}
 

Y un ejemplo: [url]http://jsfiddle.net/c2am/G4bHV/138/embedded/result/[/url]

Sobre el uso de pseudo elementos: [url]http://librosweb.es/css_avanzado/capitulo_3/pseudo_elementos.html[/url]

Saludos

Exactamente algo así era lo que trataba de hacer.

Bien, no me explique de la forma adecuada, pero ayer lo hice algo parecido pero incluyendo gradientes en background en vez de los div before, muy buena idea!

Muchas gracias por tu ayuda, y me paso a leer las ligas que me mandaste!.

Saludos!

[C2am]

En realidad me parece más correcto el uso de gradientes, pero trate de crear algo parecido a lo planteado.
Eso sí, verifica sobre la compatibilidad de los gradientes con los distintos navegadores, aunque me parece que a esta altura ya no debería ser un problema.
Saludos