Scribd
Cargar
5 vistas2 páginas

Botones Interactivos de Postres Saludables

El documento es una página HTML que presenta un diseño centrado con botones que enlazan a diferentes páginas sobre comida saludable. Cada botón tiene una imagen de fondo y un texto descriptivo debajo. La página utiliza CSS para estilizar el diseño y los efectos de hover en los botones.

Cargado por

mendozaodeth0
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
5 vistas2 páginas

Botones Interactivos de Postres Saludables

El documento es una página HTML que presenta un diseño centrado con botones que enlazan a diferentes páginas sobre comida saludable. Cada botón tiene una imagen de fondo y un texto descriptivo debajo. La página utiliza CSS para estilizar el diseño y los efectos de hover en los botones.

Cargado por

mendozaodeth0
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página con Botones y Textos</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
flex-direction: column;
}

.button-container {
display: grid;
grid-template-columns: repeat(5, 150px);
gap: 20px;
justify-content: center;
}

.button-wrapper {
text-align: center;
}

.button {
width: 150px;
height: 150px;
border: none;
background-size: cover;
background-position: center;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.button:hover {
transform: scale(1.1);
}

.button:focus {
outline: none;
}

.button-text {
margin-top: 10px;
font-size: 14px;
color: #333;
}
</style>
</head>
<body>

<h1>Comida Saludable</h1>
<h2>Postres</h2>

<div class="button-container">
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 1</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 2</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 3</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 4</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 5</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 6</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 7</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 8</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 9</p>
</div>
<div class="button-wrapper">
<button class="button" style="background-image: url('[Link]');"
onclick="[Link]='[Link]';"></button>
<p class="button-text">Texto 10</p>
</div>
</div>

</body>
</html>

También podría gustarte