<style> ul.demobotones a { color: #FFF; float: left; font-size: 26px; height: 40px; line-height: 40px; margin: 0 5px; text-align: center; text-shadow: 1px 1px 1px #000; width: 120px; -moz-border-radius: 9px; /* Firefox */ -webkit-border-radius: 9px; border-radius: 9px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */ background: #65A5ED; background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */ background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */ -moz-box-shadow: 0 0 4px #000; /* Firefox */ -webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */ box-shadow: 0 0 4px #000; /* W3C */ } ul.demobotones a:hover{ border-color: #000062; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */ background: #DCDCDC; background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */ background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */ } ul.demobotones a:active{ -moz-box-shadow: 0 0 2px #000; /* Firefox */ -webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */ box-shadow: 0 0 2px #000; /* W3C */ } </style> <ul class="demobotones"> <li><a href="#">Blogger</a></li> <li><a href="#">RSS</a></li> <li><a href="#">Contacto</a></li> </ul>
Esta es una de las tantas formas de crear botones sin imágenes, utilizando sombras, gradientes y otras características del CSS3 que, con ciertas limitaciones, funcionarán en cualquier navegador.
REFERENCIAS:Martin Ivanov

Títulos con efectos usando :after y :before
before es lo que está antes , after es lo que está después ... los …
5 comentarios:
Feliz año!! que se cumplan tus deseos.
Un abrazo
Ahhh pero qué rebonitos ehhhh
Me gusta mucho como se ven
Feliz año jmiur siempre con lo mejor para el blogg
¡ Feliz año, Eurice !!!

¡ Feliz año, Jhonnysan !!!
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...