Boton retro espacial
<button class="retro-futuristic-button" onclick="verPelicula()">Ver la Película</button>
<style>
@keyframes glow {
0% { box-shadow: 0 0 10px #ff00ff; }
50% { box-shadow: 0 0 20px #00ffff; }
100% { box-shadow: 0 0 10px #ff00ff; }
}
.retro-futuristic-button {
background: linear-gradient(90deg, #ff00ff, #00ffff);
border: 2px solid #ffffff;
padding: 15px 30px;
font-size: 18px;
color: #ffffff;
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
box-shadow: 0 0 10px #ff00ff;
cursor: pointer;
transition: transform 0.2s ease-in-out;
animation: glow 1.5s infinite alternate;
position: relative;
overflow: hidden;
}
.retro-futuristic-button:active {
transform: scale(0.9);
filter: brightness(1.2);
}
.retro-futuristic-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
transform: translate(-50%, -50%) scale(0);
transition: transform 0.3s ease-out;
}
.retro-futuristic-button:hover::before {
transform: translate(-50%, -50%) scale(1);
}
</style>
<script>
function verPelicula() {
window.location.href = "AQUÍ_PON_TU_ENLACE"; // Reemplaza AQUÍ_PON_TU_ENLACE con el enlace de la película
}
</script>