GPT-5.4

Houdini Gradient Border Button
A 0.70T 0.24
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Shiny Border</title>
7  <style>
8    :root{
9      --bg:#000;
10      --panel:#07080d;
11      --text:#f2f4f8;
12      --border-dark:#121722;
13      --shine:#67d2ff;
14      --shine-soft:rgba(103,210,255,.28);
15      --radius:0px;
16      --w:148px;
17      --h:48px;
18      --b:2px;
19      --dur:2.2s;
20    }
21
22    *{box-sizing:border-box}
23    html,body{
24      height:100%;
25      margin:0;
26      background:var(--bg);
27      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
28    }
29
30    body{
31      display:grid;
32      place-items:center;
33      overflow:hidden;
34    }
35
36    .btn{
37      position:relative;
38      width:var(--w);
39      height:var(--h);
40      display:grid;
41      place-items:center;
42      color:var(--text);
43      font-size:15px;
44      letter-spacing:.2px;
45      background:linear-gradient(180deg, rgba(10,12,18,.92), rgba(6,7,11,.96));
46      border:var(--b) solid var(--border-dark);
47      border-radius:var(--radius);
48      box-shadow:
49        inset 0 0 0 1px rgba(255,255,255,.015),
50        0 0 0 1px rgba(255,255,255,.01);
51      isolation:isolate;
52    }
53
54    .btn span{
55      position:relative;
56      z-index:2;
57      text-shadow:0 0 8px rgba(255,255,255,.06);
58    }
59
60    /* moving glow riding around the border */
61    .btn::before{
62      content:"";
63      position:absolute;
64      inset:calc(-1 * var(--b));
65      border-radius:inherit;
66      padding:var(--b);
67      background:
68        conic-gradient(
69          from 0deg,
70          transparent 0deg 300deg,
71          rgba(103,210,255,.0) 312deg,
72          rgba(103,210,255,.95) 332deg,
73          rgba(170,235,255,.95) 344deg,
74          rgba(103,210,255,.55) 354deg,
75          transparent 360deg
76        );
77      -webkit-mask:
78        linear-gradient(#000 0 0) content-box,
79        linear-gradient(#000 0 0);
80      -webkit-mask-composite:xor;
81              mask-composite:exclude;
82      filter:
83        drop-shadow(0 0 4px rgba(103,210,255,.45))
84        drop-shadow(0 0 10px rgba(103,210,255,.18));
85      animation:spin var(--dur) linear infinite;
86      z-index:1;
87    }
88
89    /* subtle ambient edge tint so the dark border is still visible */
90    .btn::after{
91      content:"";
92      position:absolute;
93      inset:0;
94      border-radius:inherit;
95      pointer-events:none;
96      background:
97        linear-gradient(90deg, rgba(103,210,255,.06), transparent 28%, transparent 72%, rgba(103,210,255,.04));
98      mix-blend-mode:screen;
99      opacity:.55;
100    }
101
102    @keyframes spin{
103      from{ transform:rotate(0deg); }
104      to{ transform:rotate(360deg); }
105    }
106  </style>
107</head>
108<body>
109  <div class="btn"><span>Shiny Border</span></div>
110</body>
111</html>