<!-- Contenedor del video con botón -->
<div class="video-container">
<video class="background-video" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
<a href="https://www.ejemplo.com" target="_blank" class="video-button">PAGINA WEB DE EJEMPLO</a>
</div>
<style>
.video-container {
position: relative;
width: 400px;
height: 225px;
margin: 20px auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.background-video {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(100%);
transition: filter 0.3s ease;
}
.video-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 123, 255, 0.8);
color: white;
padding: 10px 20px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
transition: all 0.3s ease;
}
/* Efecto hover en el contenedor */
.video-container:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
/* Efecto hover en el video */
.video-container:hover .background-video {
filter: brightness(50%); /* Oscurece el video */
}
/* Efecto hover en el botón */
.video-container:hover .video-button {
background-color: rgba(0, 86, 179, 1); /* Color más oscuro */
transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño */
}
</style>
