Hoy quiero compartir una solución rápida para colocar un botón encima de una imagen usando CSS. Esto se me ocurrió esta semana en un sitio que administramos y después de configurarlo sentí que podría ser útil para otras personas. Así que pensé que iba a publicar una publicación rápida en la que explicaba cómo hacerlo.
En primer lugar, la tarea es colocar los botones «Comprar boletos» en las imágenes del encabezado de cada película en un sitio de festival de cine. Hay alrededor de 40 películas en el festival y necesitamos hacer un botón para cada página que enlaza con otra página personalizada que contenga un carrito de compras. Esto también debe hacerse lo antes posible. Teniendo en cuenta las restricciones de tiempo y que necesitamos hacer 40 botones similares, aunque cada enlace a una página diferente, necesitamos encontrar una solución simple y clara con los cambios mínimos necesarios en la estructura de la página. Hay varias formas de hacer esto, como escribí anteriormente, elegí una solución CSS que funcionó bastante bien. Para comenzar, la imagen del encabezado en cada página es poco más que un enlace de imagen con dimensiones de ancho completo. Esta es la imagen que necesitamos para colocar el botón como se ve en la imagen de abajo.
Este es un ejemplo del código original:
<img href=“https://website/images/header1” width=“1024px” height=“350px” alt=“film title”/>
Como la imagen ya estaba en su lugar, utilicé el siguiente código html para crear la estructura HTML que seguiríamos con CSS. Esta es una buena solución ya que es muy poco HTML.
<div class=“button-container”
<img href=“https://website/images/header1” width=“1024px” height=“350px” alt=“film title”/>
<a href=“add link here” alt=“Buy Tickets”>Tickets</a>
</div>
Como puede ver, creé un enlace de anclaje que se estilizará en el botón y lo envolveré junto con la imagen en un contenedor div. Estas tres líneas de HTML son todos los cambios que serán necesarios para la estructura de la página. Con el HTML en su lugar, es hora de pasar al CSS, donde se realiza la mayor parte del trabajo. A continuación se muestra el código CSS completo que utilicé.
/* Botones de entradas de estilos utilizados en páginas de descripción de películas.*/
.button-container{
display:inline-block;
position:relative;
}
.button-container a{
position: absolute;
bottom:4em;
right:4em;
background-color:#8F0005;
border-radius:1.5em;
color:white;
text-transform:uppercase;
padding:1em 1.5em;
}
Primero diseñamos la clase div .button-container
, que configuramos para mostrar como un bloque en línea y establecemos su posición en relativa. Esto nos permite posicionar el “botón” sobre la imagen. Para hacerlo le damos a la clase .button-container
una posición absoluta y luego definimos su distancia desde la parte inferior y derecha del .button-container, que contiene y tiene el mismo tamaño que la imagen. Como queremos que nuestro botón se encuentre en la parte inferior derecha, esto funcionó perfectamente, pero también puede usar los valores de la izquierda o de la parte superior, si lo prefiere.
A continuación, diseñamos el botón con un color de fondo y redondeando las esquinas con un radio de borde. Luego, establecimos el color del texto, lo transformamos en mayúsculas y agregamos relleno entre él y el borde exterior del fondo. No tiene que ir con un estilo tan simple, sino que puede personalizar el botón a su gusto.
Luego, preparamos el botón para dispositivos móviles utilizando una consulta de medios para empujarlo justo debajo de la imagen y antes del bloque de texto que lo sigue. Después de algunos experimentos, quedó claro que solo se necesitaba una consulta de medios, así que configuré la consulta de medios en un ancho máximo de 600px.
@media only screen and (max-width:600px) {
.button-container{
display:inline-block;
margin-bottom:2em;
}
.button-container a{
position:relative;
bottom:0em;
right:-2em;
background-color:#8F0005;
color:white;
font-size:1em;
padding:1em 1.5em;
text-transform:uppercase;
border-color:white;
border-radius:1.5em;
}
}
Luego eliminé la posición de .button-container y configuré la posición como relativa en .button-container a
. Después de lo cual, agregué un margen inferior de 2em a .button-container
para abrir un espacio debajo de la imagen y luego ajusté los valores de propiedad de la parte inferior y derecha en .button-container a para centrar el botón debajo de la imagen y antes del texto que sigue .
Teniendo eso en su lugar, agregué algunos efectos de desplazamiento simple para arreglar un poco el botón.
.button-container a:hover{
background-color:red;
cursor:pointer;
color:white;
}
Esta solución simple funcionó de maravilla porque después de configurar el primer botón, pude crear los botones en las 39 páginas restantes simplemente envolviendo cada una de las imágenes de encabezado en el contenedor div y luego agregando el enlace adecuado. Quizás este sencillo tutorial sea útil para alguien que esté por ahí. También me interesaría escuchar sobre los diferentes enfoques que algunos de ustedes podrían haber tomado.
Deja una respuesta