Enlace extendido a un bloque
Mediante este sencillo efecto con html y css puedes hacer que cuando inluyas un enlace (<a href>..</a>) en un bloque todo el bloque se convierta en un botón y responda a ese enlace.
Es decir, todo el bloque contenido el enlace actúa como un botón y pulsarlo en el bloque es como pulsar en el enlace.
En Bootstrap puedes encontrarlo como clase stretch. Aquí aprenderá como conseguirlo con muy pocas líneas de código.
El código HTML
Para el ejemplo que ilustre este efecto usamos un código html de lo más simple: un bloque div y dentro un enlace.
El bloque es el contenedor y le asignaremos una clase boton y al enlace le asignamos la clase stretch
<div class="boton">
<a href="/" class="stretch">Ir a home</a>
</div>
Estilos CSS
Al contenedor vamos a darle posicionamiento relativo y para que se vea le coloco un borde y un tamaño de 200 x 50 px. Para que el enlace quede centrado le colocamos la propiedad display a flex y alineamos al centro en horizontal (justify-content) y vertical (align-items).
Luego al enlace le colocamos el pseudo elemento ::after. Esta es la clave: va a estar en psoción absolute respecto al contnedor boton y ocupando todo el espacio de este. Así al hacer click en ese contendor realmente estamos haciendo click en el enlace.
@charset "utf-8";
.boton{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
border: 1px solid blue
}
.boton .stretch::after{
content:'';
position: absolute;
inset: 0;
}
La clase stretch nos imprescindible, en lugar de .stretch::after podría usarse .boton a::after, con lo cual cualquier .button con un enlace tendría este efecto. Lo importante es que el contenedor tenga position relative