lunes, 25 de abril de 2011

Vagabundia

Vagabundia


Botones multilínea con CSS3

Posted: 24 Apr 2011 08:00 PM PDT

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>

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog