JMiur [E]

Estos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.

En principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow

Además, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:
-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));
se transformaría en esto:
-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
El HTML es genérico, se scribe siempre igual:
<a class="button white" href="#">ejemplo</a>

Este es el CSS de uno de los botones:
.button { /* clase general */
  border: 1px solid #dedede;
  border-radius: 3px;
  color: #555;
  display: inline-block;
  font: bold 12px/12px HelveticaNeue, Arial;
  padding: 8px 11px;
  text-decoration: none;
}

.button.white{
  background: #f5f5f5;
  border-color: #dedede #d8d8d8 #d3d3d3;
  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
  color: #555;
  text-shadow: 0 1px 0 #fff;
  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: linear-gradient(top,  #f9f9f9, #f0f0f0);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
}

.button.white:hover{
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    text-shadow: 0 1px 0 #fdfdfd;
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);
    background: -o-linear-gradient(top,  #efefef, #f8f8f8);
    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);
    background: linear-gradient(top,  #efefef, #f8f8f8);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
}
Sí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.

9 comentarios:

Unknown  

Muy bueno Jmiur :)

Responder
Unknown  

Estoy empezando con CSS y me parece una preciosa forma de usar lo aprendido. Gracias por estos geniales ejemplos :)

Responder
Gatito Kwaii xD :v  

estan lindos los css

Responder
XiC Nou Barris  

hola jmiur, disculpa que te haga mi consulta en esta entrada pero llevo varios días intentando buscar alguna entrada referente a mi pregunta,,, buscaba información en tu blog referente a como tienes puestas las entradas resumidas y con la imagen que al picarla se ve toda la entrada completa.
muchas gracias
núria

JMiur  

Está explicado en estas tres entradas: 1 2 3

XiC Nou Barris  

muchas gracias, me las guardaré para ver si en un futuro puedo poner alguno de los ejemplos,,, mi plantilla debe de ser muy rara porque no encuentro nada o casi nada asociado para los cambios.

Responder
Vhila  

Hola JMiur la pregunta que te voy hacer no tiene que ver con esta entrada pero no sé donde ponerlo.
Sabes como puedo hacer en mi blog " http://www.proyectovhila.com/ " para que los comentarios añadidos tengan los mismos estilos que los comentarios normales? o que tengo que hacer para ponerlos iguales, esque ya llevo unos dias intentandolos y no doy hecho.
Gracias

JMiur  

Si te refieres a los comentarios anidados, fíjate en estas dos entradas: 1 y 2

Hasta allí llegué por que no los uso.

Responder
Effand Nozh  

Very amazing ..
thanks for your share .. :)

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