JMiur [E]

Sí, el CSS para estos modelos de botones es extremadamente largo pero no hay más remedio cuando cada navegador usa sus propiedades y hay que repetirlas varias veces. De todos modos, lo que nos muestra wiseheartdesign.com es una alternativa válida, sobre todo, para aprender cómo pueden combinarse y que funcionen relativamente bien en la mayoría de las plataformas.

El demo puede verse funcioanndo acá y la idea es crear botones que tengan varias líneas de texto.

En la página del autor hay varios ejemplos y este sólo es uno de ellos:
<style>
a.multi-line-button {
  /* lo normal */
  background-color: #60a3d8;
  border-color: #2970a9;
  border-left-color: #60a3d8;
  border-top-color: #60a3d8;
  border-style: solid;
  border-width: 1px;
  color:#EEE;
  display: block;
  margin: 0.2em auto;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  /* el CSS3 */
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  -o-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -khtml-background-clip: padding-box;
  background-clip: padding-box;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89BBE2), color-stop(50%, #60A3D8), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  background-image: linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#89bbe2', EndColorStr='#378BCE'); 
  -moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  text-shadow: #2e7ebd 0 1px 2px;
}
a.multi-line-button .title {
  color: #CFF;
  display: block;
  font-family: Times New Roman;
  font-size: 24px;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
a.multi-line-button .subtitle {
  color: #DEF;
  display: block;
  font-family: Georgia;
  font-size: 14px;
  margin-top: 4px;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
a.multi-line-button:hover .title {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

a.multi-line-button:hover .subtitle {
  opacity: 0.8;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
a.multi-line-button:active {
  padding: 13px 15px 11px;
}
a.multi-line-button:hover, a.multi-line-button:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9DC7E7), color-stop(50%, #74AFDD), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
  background-image: linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
}
a.multi-line-button:active, a.multi-line-button.depressed {
  border-color: #2970a9;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796C8), color-stop(100%, #6AA2CE));
  background-image: -moz-linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  background-image: linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
</style>
Y se usaría de este modo:
<a class='multi-line-button' href='#' style='width:14em'>
  <span class='title'>MI EJEMPLO</span>
  <span class='subtitle'>el botón con una segunda línea de texto de cualquier longitud</span>
</a>

2 comentarios:

Unknown  

Hola JMiur como está muy buen sitio ya está agregado a los enlaces interezantes de ciberexperto.blogspot.com, lo que le quería preguntar es como hizo ese plugin de gusqueda para firefox me interezaría mucho crear uno para el sitio.


Atentamente Daniel Rodríguez.

Saludos

Responder
JMiur  

Daniel:

Está explciado en esta entrada pero es un poco vieja así que es probable que algunas referencias haya que buscarlas nuevamente.

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