JMiur [E]

Button Maker es muy simple de usar. Permite que creemos botones con estilo, usando una serie de opciones que, al ir cambiando, podemos ver en una previsualización instantánea lo que lo hace muy intuitivo y fácil de manejar.


Una vez que nos hemos decidido, basta hacer click en el mismo botón generado para que nos de las definiciones CSS necesarias; por ejemplo:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
padding: 13px 26px;
text-decoration: none;
vertical-align: middle;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}



Simplemente son tres definiciones de clases CSS que podemos agregar en cualquier parte, ya sea entre <b:skin> y </b:skin> o bien entre etiquetas <style> y </style>

Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.

Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:
<a href="una_URL" class="button">, texto del enlace <,/a>,
Como muchas plantillas tienen definiciones de estilo que afectan a TODOS los enlaces o a los enlaces de una sección del blog, a veces es necesario reforzar la definición y para eso agregamos la palabra !important; por ejemplo:
color: white !important;
font-size: 20px !important;
Es una pena que se sigan olvidando que Internet Explorer existe y que algunas de esas propiedades pueden ser utilizadas con limitaciones. En este caso, usando filtros:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
display: block;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 125px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF93BDD9', EndColorStr='#FF384954');
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0093BDD9', EndColorStr='#00384954');
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}


REFERENCIAS:Gem@ Blog

22 comentarios:

Graciela  

Jmiur siempre me pregunto, si le indicamos para IE en Mozilla también se aprecia?

Buen día :)

Responder
Argifauve  

Graciela:
en los ejemplos son para visualizar en uno u otro navegador.

Me ha pasado lo mismo, hace tiempo con otro ejemplo en otro post de hace unos meses creo.

...que no se ve.. no lo veo la diferencia...

claro... estaba en Firefox :D

Conclusión: los efectos o detalles que indiquen IE (Internete Explorer) son para visualizarlo desde ese navegador.
Es que IE es el complicado... se ve en Opera, Safari, Chrome..

Responder
JMiur  

Graciela: La versión IE la verás en cualquier navegador porque incluye las propiedades para todos.

Argifauve: El primer ejemplo no se verá en IE pero el segundo si; se verá en cualquier navegador.

Responder
Argifauve  

No si a eso me remontaba, no se si recuerdas.. creo que..no se si era un tigre o un leon (bien no lo recuerdo en el post)
que..
el IETab no lo veo.. IETab no lo veo..

...como lo iba a ver si no tenía instalado IE :X

(fue en uno de los últimos post donde estaba el ejemplo para IE y otros)
cosas que pasan..

Responder
JMiur  

Pasan cosas peores :D

Responder
Graciela  

Mira mira mira, okey, con esto de mirar en los dos navegadores, que cada cosa se ve de manera distinta, tengo tantas dudas...cual niña en la edad de los por qué ;)

Argi solo me dan las neuronas para IE y Mozilla, sabes que no he navegado por los otros? :)

Responder
Gem@  

Más detallado imposible :)

Responder
JMiur  

Graciela, Gem@: Somos niños jugando :D

Responder
Graciela  

Por suerte no hemos matado al niño jajaja
Y después hablo del síndrome de Peter Pan, debo tener todos juntos

Responder
JMiur  

Y es contagioso :D

Responder
tagmander  

No pues no, los botones se ven cuadrados en IE 7 aun.

Responder
JMiur  

Nadie ha dicho que se verían redondeados. IE no tiene propeidades ni filtros para eso.

Responder
secondemain  

sois la ostia un milllon de gracias

Responder
yayobottarini  

Hola Vagabundia, es un chiche este blog, ¡tiene de todo! Te cuento que tengo un blog y le quiero agregar las barras de traducción. Éncontré una que me gusta pero no se como instalarlo al blog. Al intentarlo como se me ocurrió (por medio de los gaddest) me lo rechazó google diciendo que solo admintían formato HTML, o algo por el estilo. La cuestión es ¿COMO AGREGO BARRAS DE TRADUCCIÓN A MI BLOG? Aclaro que soy muuuuuuy burra, (por ejemplo no se que me estás diciendo con que puedo utilizar estas estiquietas de aquí abajo)
Bueno, gracias por tu respuesta y hasta prooontoooo.......

Responder
CristJian  

hola que tal! gracias por ese truquito ;)
una pregunta... como podria editar un boton que tengo en mi blog para que se vea mas atractivo jeje =)

este es mi blog: http://elsentirpopular.blogspot.com/

quisiera saber si se puede editar el botón de enlazar (osea, lo que dice "Enlaza El Sentir Popular") hace algún tiempo había visto algo parecido como editar esos botones, pero no recuerdo donde había visto esa informacion jeje :)

Responder
JMiur  

Que propiedades usar, no puedo decirte porque eso es subjetivo; lo básico es que debes agregar una regla de estilo para modificarlo; sería algo así:

#HTML4 input[type="submit"] {
border: none;
background: none;
}

donde esas dos que he puesto, le quitan el borde y fondo que tienen los botones de ese tipo por defecto y que dependen de cada navegador.

Responder
Javierlota AF  

Hola Jmiur,

Aunque utilizo la propiedad !important, el texto del botón me sigue apareciendo con el estilo de los enlaces.

¿Se te ocurre algo que lo haga más "importante" aún?

En esta entrada hay un botón para que lo veas:

http://www.elartedelafotografia.com/2012/02/6-cupidos-pinceles-brushes-para.html

Responder
JMiur  

Eso es porque colocas el color en la etiqueta SPAN pero tu hoja de estilo tienen identificado el color de los enlaces como azules así que deberías usar esta regla:

.button a { color: #FFF; }

Responder
Javierlota AF  

Muchas gracias Jmiur!!

No sé por qué pero ahora no me surte efecto la propiedad hover pero no me importa "pagar" ese precio con tal de que quede blanco.

Responder
JMiur  

No funciona porque no sólo has cambaido el color del enlace en si mismo sino que has cambaido la regla de estilo completa que antes decía:

.button { ....... }

por esta otra:

.button a { ....... }

así que ahora deberías cambia la regla de hover que dice:

.button:hover { ....... }

por

.button a:hover { ....... }

Responder
Javierlota AF  

Ya está, muchas gracias.

Hay que ver la importancia que tiene una "a". A modo de aprendizaje para el futuro, ¿Esa "a" qué indica?

Responder
JMiur  

La letra a hace referencia al enlace.
button es la clase agregada a una etiqueta SPAN y dentro de ese SPAN esta el enlace:

<span class="button">
<a ........... >DESCARGAR</a>
</span>

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