sublime-button-example/index.html at main · KevanMacGee/sublime-button-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #fdfdfd;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        overflow: hidden;
      }

      .scene {
        perspective: 1000px; /* The 'depth' of the room */
      }

      .wix-button {
        width: 480px;
        height: 80px;
        background: #000;
        color: #fff;
        border: none;
        font-family: "Arial Black", sans-serif;
        font-weight: 900;
        font-size: 20px;
        letter-spacing: 5px;
        cursor: pointer;
        text-transform: uppercase;

        /* 0.15s ease-out gives it that heavy, premium 'see-saw' weight */
        transition: transform 0.15s ease-out;
        will-change: transform;
        transform-style: preserve-3d;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <button class="wix-button" id="globalTarget">
        GET TICKETS HERE
      </button>
    </div>

    <script>
      const el = document.getElementById("globalTarget");
      const d = 30; // Max tilt degrees

      window.addEventListener("mousemove", (e) => {
        const rect = el.getBoundingClientRect();

        // 1. Get the center point of the button
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        // 2. Calculate mouse distance from center (-1 to 1)
        const x = (e.clientX - centerX) / (window.innerWidth / 2);
        const y = (e.clientY - centerY) / (window.innerHeight / 2);

        // 3. Map to rotation and translation
        const rX = Math.max(Math.min(y * -d, d), -d);
        const rY = Math.max(Math.min(x * d, d), -d);

        // NEW: We added the X and Y translation here to make it 'float'
        const tX = x * 15; // Moves up to 15px left/right
        const tY = y * 15; // Moves up to 15px up/down

        // Apply everything in one go
        el.style.transform = `rotateX(${rX}deg) rotateY(${rY}deg) translateX(${tX}px) translateY(${tY}px)`;
      });
    </script>
  </body>
</html>