Mouse over en botones y div redondeado

[Ozone]

hola!.
me gustaria conseguir botones de este tipo:
http://i32.tinypic.com/dy89cx.png
¿puedo definirlo con css facilmente?

y ademas me pregunto como hacer efecto mouse over sin usar HTML, yo uso este code:

Código HTML:

<img src="URL" onmouseover="this.src='URL';" onmouseout="this.src='URL';" border="0"> 

pero el cambio de una imagen a otra es muy lento. en cambio en sitios como este:
http://jquery.com/ (ver boton a la derecha "download jquery") el cambio es automatico y segun veo no esta definido con html... me gustaria saber como hacerlo.

¡muchas gracias!

[cristian_cena]

Hola Ozone:

Iniciado por Ozone

hola!.
me gustaria conseguir botones de este tipo

http://ceslava.com/blog/esquinas-red...border-radius/

Puedes definirlo con css3 y esto implica que no todos los navegadores lo puedan renderizar.

Iniciado por Ozone

como hacer efecto mouse over

utilizando la pseudoclase :hover

El modo tradicional de hacerlo es creando una lista no ordenada e incluyendo las imagenes como fondo de un item de esa lista

ESTRUCTURA en BODY
<ul>
<li>
<a href="#" id=""></a>
</li>
</ul>

ESTILOS en HEAD
li {
background-image: url(Large.gif);
width:ancho_de_tu_imagen_px;
height:alto_de_tu_imagen_px;
background-repeat:no-repeat;
list-style:none;
}
li:hover {
background-image: url(Large2.gif);
width:ancho_de_tu_imagen_px; ;
height:alto_de_tu_imagen_px; ;
background-repeat:no-repeat;
list-style:none;
}

Pero si analizas el ejemplo que citas verás que la solución que te pasé no es igual al método que utilizan en la página de JQuery, pues aquí usan Sprites CSS
Puedes hacerlo en un principio con el metodo que te pase y luego avanzar en el uso de sprites que es lo que se aconseja.

Aquí puedes aprender al respecto
http://www.pixelovers.com/css-sprite...to-web-i-37249

Saludos!

[alexk]

mira esta aplicacion es sencillo
http://ponguapotublog.blogspot.com/2...o-con-css.html