Efeito press

Okaeri, minna-chan.

Hoje vim ensinar outro efeito que eu mesma inventei, onde as imagens parecem ser inseridas num botão que fica pressionado ao passar o rato - daí o nome, né? Você pode fazer com ou sem texto, sendo que o texto deverá fazer parte da imagem. Com texto é mais complicado, mas mesmo assim não faz parte do efeito da imagem, isso irá depender do que colocar no gadget, ou seja, se coloca uma imagem em hover. O efeito em si é bem simples, o resultado será este:

Prévia (www): 

Tutorial: 

Procure por:

/b:skin

Acima acrescente:

.press {
background: #FFEBCD;
color: transparent;
border: 1px solid #F4A460;
box-shadow: 2px 2px 2px #CD5C5C;
padding: 5px;
overflow: hidden;
text-align: center;
font-family: silkscreen;
font-size: 12px;
-webkit-transition-duration: .90s;
}
.press:hover {
background: #CD5C5C;
border: 0px solid #cccccc;
box-shadow: 0px 0px 0px #cccccc;
color: #cccccc;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
-webkit-transition-duration: .90s;
}

Eu só indico que mude as cores, mas se perceber bem de HTML, também pode mudar a opacidade, a sombra, as bordas... Relembro que explico para que serve cada coisa aqui» www

Se quiser que apareça texto, ele terá de aparecer em imagem. Ou seja, guarde a mesma imagem com e sem texto, e quando for colocar no gadget, em vez de:

<img src="URL DA IMAGEM" class="press">

Coloque:

<img src="URL DA IMAGEM" onmouseover="this.src='URL DA IMAGEM EM HOVER'"  onmouseout="this.src='URL DA IMAGEM'" class="press">

E pronto, já está ^^