JMiur [E]

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.
<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>

REFERENCIAS:Martin Ivanov

5 comentarios:

✙Eurice✙  

Feliz año!! que se cumplan tus deseos.
Un abrazo

Responder
Graciela  

Ahhh pero qué rebonitos ehhhh :P

Responder
Toni  

Me gusta mucho como se ven :)

Responder
Jhonnysan  

Feliz año jmiur siempre con lo mejor para el blogg

Responder
JMiur  

¡ Feliz año, Eurice !!!

¡ Feliz año, Jhonnysan !!!

:D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR