Problema al crear boton con Div

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