Botones multilínea con CSS3

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>

MI EJEMPLOel botón con una segunda línea de texto de cualquier longitud