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
Unknown  

Ahhh pero qué rebonitos ehhhh :P

Responder
Toni Teror  

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

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