Hola
Puede que me esté faltando algo por leer o por pillar de la idea porque no vi la complicación ni entendí bien tus comentarios sobre el código de Deet.
En cualquier caso, aquí dejo un ejemplillo sencillo de lo que interpreté, posiblemente no sea lo que buscas, pero a partir de ahí puede que nos logremos entender.
Código:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; background-color: #fff; }
#Base { width: 100%; height: 100%; background-color: #fff;}
#capaBoton {background: #000; width: 200px; height: 90px; border: 5px solid #aaa; text-align: center;}
#boton {position: relative; top: 10px; background: inherit; color: #ccc; cursor: pointer; padding: 0 20%;}
#franja {position: relative; top: 50px; height: 20px; background: #F48511;}
</style>
<title>Pruebilla</title>
</head>
<body>
<div id="Base">
<div id="capaBoton">
<button type="submit" id="boton">Texto del botón</button>
<p id="franja"> </p>
</div>
</div>
</body>
</html>
Coloqué el vínculo como un botón porque cuando lo leí la primera vez pensé que era lo que querías. En cualquier caso, los vínculos también son elementos inline, por lo que comparten la mayoría de las características con button.
La altura de la capa, la franja y el área del botón (enlace), es totalmente controlable.
Las dimensiones del texto también son controlables.
Puse un padding de 20% a los lados para aumentar la zona activa, sin embargo, puede ser de cualquier dimensión que desees mientras no supere el ancho del botón. Probado con frases de 2 a 25 caracteres. Obviamente si esperas más caracteres que esos, basta con reducir el padding.
Bueno, ya nos dirás.
Felicidad