Défi de la semaine : Bouton phosphorescent

HTML

CSS

body {
      margin: 0;
      padding: 0;
      background-color: #050110;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Courier New', Courier, monospace;
      overflow: hidden;
      perspective: 800px;
    }

/* Ambient Space Engine Layer */
    #spaceCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

/* Outrun / Synthwave Neon Sun */
    .synth-sun {
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 250px;
      background: linear-gradient(to bottom, #ffe600, #ff007f 60%);
      border-radius: 50%;
      z-index: 2;
      box-shadow: 0 0 60px #ff007f;
      mask-image: linear-gradient(to bottom, 
        black 0%, black 40%, 
        transparent 45%, black 48%, black 58%, 
        transparent 62%, black 65%, black 73%, 
        transparent 77%, black 80%, black 88%, 
        transparent 91%, black 93%, black 97%, 
        transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, 
        black 0%, black 40%, 
        transparent 45%, black 48%, black 58%, 
        transparent 62%, black 65%, black 73%, 
        transparent 77%, black 80%, black 88%, 
        transparent 91%, black 93%, black 97%, 
        transparent 100%);
      opacity: 0.85;
      transition: transform 0.1s ease-out;
    }

/* 3D Perspective Grid Floor */
    .grid-floor {
      position: absolute;
      bottom: 0;
      left: -50%;
      width: 200%;
      height: 50%;
      background-image: 
        linear-gradient(to right, rgba(0, 243, 255, 0.25) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(0, 243, 255, 0.25) 2px, transparent 2px);
      background-size: 50px 50px;
      transform: rotateX(75deg);
      transform-origin: top center;
      animation: hyperdrive var(--grid-speed) linear infinite;
      z-index: 2;
    }

/* Horizon Glow Separation and Masking */
    .horizon-glow {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
      box-shadow: 0 0 20px var(--primary-glow);
      z-index: 3;
    }

@keyframes hyperdrive {
      0% { background-position: 0 0; }
      100% { background-position: 0 100%; }
    }

/* Button Layout Mechanics & UI */
    .interface-wrapper {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.neon-hull {
      position: relative;
      padding: 4px;
      border-radius: 12px;
      background: radial-gradient(
        100px circle at var(--mouse-x) var(--mouse-y),
        var(--primary-glow),
        var(--secondary-glow) 60%,
        transparent 100%
      );
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

.cyber-btn {
      position: relative;
      background: #090615;
      color: #ffffff;
      border: 1px solid rgba(0, 243, 255, 0.4);
      padding: 22px 55px;
      font-size: 22px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 5px;
      border-radius: 8px;
      cursor: pointer;
      outline: none;
      display: block;
      overflow: hidden;
      transition: all 0.3s ease;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

/* Static scanning horizontal line overlay inside the button */
    .cyber-btn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(rgba(18, 16, 36, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
      background-size: 100% 4px, 6px 100%;
      pointer-events: none;
    }

/* Ultimate Outer Blast Glow on Hover */
    .neon-hull::after {
      content: '';
      position: absolute;
      inset: -5px;
      background: inherit;
      border-radius: inherit;
      filter: blur(30px);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

.neon-hull:hover {
      transform: scale(1.05) translateY(-5px);
    }

.neon-hull:hover::after {
      opacity: 0.85;
    }

.neon-hull:hover .cyber-btn {
      color: #050110;
      background: var(--primary-glow);
      border-color: var(--primary-glow);
      box-shadow: 0 0 30px var(--primary-glow);
      text-shadow: none;
    }

.neon-hull:active {
      transform: scale(0.95);
    }
  </style>
</head>
<body>

<canvas id="spaceCanvas"></canvas>
  <div class="synth-sun" id="synthSun"></div>
  <div class="grid-floor" id="gridFloor"></div>
  <div class="horizon-glow"></div>

<div class="interface-wrapper">
    <div class="neon-hull" id="neonHull">
      <button class="cyber-btn" id="targetBtn">Override</button>
    </div>
  </div>

// Handle space alignment properties dynamically 
    function setupCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    setupCanvas();
    window.addEventListener('resize', setupCanvas);

// Track Global Position Array for space stars and button bursts
    let elements = [];
    
    // Populate permanent deep space background star nodes
    for(let i=0; i<80; i++) {
      elements.push({
        x: Math.random() * window.innerWidth,
        y: Math.random() * (window.innerHeight * 0.55), // Constrain strictly above horizon line
        size: Math.random() * 2,
        pulseSpeed: Math.random() * 0.05 + 0.01,
        alpha: Math.random()
      });
    }

// Capture dynamic movement to tilt components toward input positioning vectors
    window.addEventListener('mousemove', (e) => {
      // Global background reactions
      const moveX = (window.innerWidth / 2 - e.clientX) * 0.03;
      const moveY = (window.innerHeight / 2 - e.clientY) * 0.03;
      sun.style.transform = `translate(calc(-50% - ${moveX}px), calc(-50% - ${moveY}px))`;

// Local button neon trail updates
      const rect = hull.getBoundingClientRect();
      const btnX = e.clientX - rect.left;
      const btnY = e.clientY - rect.top;
      hull.style.setProperty('--mouse-x', `${btnX}px`);
      hull.style.setProperty('--mouse-y', `${btnY}px`);
    });

// Speed up background perspective flow when button is primed/hovered
    hull.addEventListener('mouseenter', () => {
      document.documentElement.style.setProperty('--grid-speed', '1.5s');
    });
    hull.addEventListener('mouseleave', () => {
      document.documentElement.style.setProperty('--grid-speed', '6s');
    });

// Color swap algorithm engine trigger on active click engagement
    let colorPalette = [
      { primary: '#00f3ff', secondary: '#ff007f' },
      { primary: '#ff007f', secondary: '#00ff66' },
      { primary: '#00ff66', secondary: '#ffff00' },
      { primary: '#9d00ff', secondary: '#00f3ff' }
    ];
    let currentPaletteIndex = 0;

hull.addEventListener('click', (e) => {
      currentPaletteIndex = (currentPaletteIndex + 1) % colorPalette.length;
      const nextColors = colorPalette[currentPaletteIndex];

document.documentElement.style.setProperty('--primary-glow', nextColors.primary);
      document.documentElement.style.setProperty('--secondary-glow', nextColors.secondary);
      floor.style.backgroundImage = `
        linear-gradient(to right, ${nextColors.primary}44 2px, transparent 2px),
        linear-gradient(to bottom, ${nextColors.primary}44 2px, transparent 2px)
      `;
    });

// Animation Loop running starfield background physics framework
    function renderSpace() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      elements.forEach(star => {
        star.alpha += star.pulseSpeed;
        if (star.alpha > 1 || star.alpha < 0.2) star.pulseSpeed = -star.pulseSpeed;
        
        ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
        ctx.fill();
      });

requestAnimationFrame(renderSpace);
    }
    renderSpace();
  </script>

</body>
</html>

JS