2

Estoy intentando hacer una especie de botones con una imagen que al pulsar me redireccionen a otro sitio, y quiero que estas estén en el centro y el texto también este en el centro y encima de estas fotos, pero no logro encontrar la forma más 'correcta' de hacerlo.

Este es mi código html

<div class="cabecera_colabora">Colabora</div>
                 
                 <div class="cont_colabora">
                     
                     <a href="voluntariado.php>"><img src=assets/img/foto2.jpg> Voluntario</a>
                     <a href="otrasformas.php>"><img src=assets/img/foto1.jpg> otras formas</a>

Esto es lo que quiero hacer más o menos: introducir la descripción de la imagen aquí

1 respuesta 1

1

Una forma seria asi:

HTML: pones un div (puede ser otra etiqueta tambien) al que vas a aplicarle la imagen de fondo y dentro el enlace que va a ser el boton que te redirija a donde quieres

.boton{
   background-repeat: no-repeat;
   width: 160px;
   height: 120px;
   border-radius: 10px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
  }
  .boton a{
   background-color: #ffffff70;
   border-radius: 3px;
   padding: 5px;
   text-decoration: none;
  }
  .img1{
   background-image: url("https://placeimg.com/160/120/animals");
  }
  .img2{
   background-image: url("https://placeimg.com/160/120/people");
  }
<div class="boton img1"><a href="otrasformas.php>">otras formas</a></div>
 <div class="boton img2"><a href="algoMas.php>">Algo mas</a></div>

CSS: Luego con css le das al div la imagen que quieras de fondo, le das que no se repita y le indicas las medidas que quieres para la imagen. Luego haces a ese div un container flex para poder centrar al enlace. Despues puedes estilizar el enlace a gusto

EDITADO

Ahi te hice una modificacion para que con minimos cambios en css y html puedas tener varios botones con distinta imagen y distinto texto. Esto se logra usando clases, la clase boton esta en ambos div con lo cual toman los mismos estilos y la clase img1 e img2 solo estan para cambiar las imagenes de fondo

1
  • pero para crear dos botones con imagenes diferentes cada uno debe tener su propio div no? Commented el 2 may. 2022 a las 9:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.