Cita:
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 CSS:
Ver original.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!