Middle Box Links para jQuery

La idea de Middle Box Links es interesante; si bien no es una solución genérica, funcionaría bien en ciertas circunstancias. De lo que se trata es de generar de manera dinámica, un botón que se muestra dentro de un DIV, que este quede centrado sin importar el contenido y además, que sea un enlace que se muestra con algún tipo de efecto.

Requiere el uso de la librería jQuery así que eso es lo primero a tener en la plantilla, la agregamos antes de </head>, por ejemplo, cargándola desde Google:

<script src="http://www.google.com/jsapi"></script>
<script> google.load("jquery", "1.3.2"); </script>

Luego, el script en si mismo que podemos ver en la pagina del desarrollador y que es algo así, aunque lo he modificado levemente a los efectos de mostrar el demo, agregando lo que está en color:

<script type='text/javascript'>
//<![CDATA[
var $el, $tempDiv, $tempButton, divHeight = 0;
$.fn.middleBoxButton = function(text, url, target) {
  return this.hover(function(e) {
    $el = $(this).css("border-color", "white");
    divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
    $tempDiv = $("<div />", { "class": "overlay rounded" });
    // esto, crea el enlace
    $tempButton = $("<a />", {
      "href": url,
      "target": target,
      "text": text,
      "class": "leermas rounded",
      "css": { "top": (divHeight / 2) - 17 + "px" }
    }).appendTo($tempDiv);
    $tempDiv.appendTo($el);
  }, function(e) {
    $el = $(this).css("border-color", "#999");
    $(".overlay").fadeOut("fast", function() { $(this).remove(); })
  });
}
//]]>
</script>

Por último, el CSS

<style type='text/css'>
.rounded { /* una clase genérica para redondear etiquetas */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.CLM { /* el rectángulo donde mostraremos el contenido que puede tener cualquier diseño*/
  border: 2px solid #666;
  color: #CCC;
  line-height: 1.2em !important;
  margin: 0 !important;
  padding: 10px 20px;
  position: relative; /* esto es obligatorio */
  text-align: center;
  width: 300px;
}
/* el botónque se generá */
.overlay {
  background: url(URL_black75.png);
  background: rgba(0,0,0,0.6);
  position: absolute;
  bottom: 0; left: 0; right: 0; top: 0;
  text-align: center;
}
/* el diseño de ese botón */
.leermas {
  color: white;
  background: #000;
  border: 2px solid #FFF;
  padding: 4px 16px;
  position: relative;
  text-decoration: none;
  -moz-box-shadow: 0 0 20px #FFF;
  -webkit-box-shadow: 0 0 20px #FFF;
  box-shadow: 0 0 20px #FFF;
}
.leermas:hover { /* efecto hover sobre el texto del botón */
  color: #FE4902;
}
</style>

Ahora hay que usarlo.

La forma más sencilla y flexible es crear el DIV, colocar su contenido e inmediatamente después, llamar a al función; un ejemplo:

<div class="CLM miContenido1 rounded">
  ....... aquí ponemos cualquier contenido ......
</div>
<script> $(function() {$(".miContenido1").middleBoxButton("Enlace a Google", "http://www.google.es/", "_blank");}); </script>

Podemos poner varios y cada uno se llama de la misma manera, dándole un nombre de clase (miContenido1, miContenido2, cualquier nombre), escribiendo el texto a mostrar, colocando la URL a abrir y, en este caso, el target (_blank indica que se abra en una nueva ventana).

Esta es una variación del mismo ejemplo y, en este caso, se abre en la misma ventana:

$(function() {$(".miContenido1").middleBoxButton("Leer más", "dirección_URL", "");});

REFERENCIAS:CSS Tricks