Gemini 3 Flash Preview

Houdini Gradient Border Button
A 0.94T 0.27
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 Animation</title>
7    <style>
8        /* Reset and center container */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            min-height: 100vh;
16            background-color: #000; /* Pure black background matching the video */
17            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
18        }
19
20        /* The main button/box container */
21        .shiny-box {
22            position: relative;
23            width: 140px;
24            height: 44px;
25            background-color: #000;
26            border-radius: 2px;
27            display: flex;
28            justify-content: center;
29            align-items: center;
30            overflow: hidden; /* Clips the rotating gradient */
31            cursor: pointer;
32            z-index: 1;
33        }
34
35        /* The rotating light effect */
36        /* We use a large pseudo-element that rotates behind a mask */
37        .shiny-box::before {
38            content: '';
39            position: absolute;
40            width: 250%; /* Large enough to cover the rectangle corners while rotating */
41            height: 400%;
42            /* Conic gradient creates the "trailing light" effect */
43            background-image: conic-gradient(
44                transparent 70%, 
45                #5ec8ff 95%, 
46                #ffffff 100%
47            );
48            animation: rotate 2s linear infinite;
49            z-index: -2;
50        }
51
52        /* The inner mask to create the thin border look */
53        .shiny-box::after {
54            content: '';
55            position: absolute;
56            inset: 1px; /* The thickness of the border */
57            background-color: #000;
58            border-radius: 1px;
59            z-index: -1;
60        }
61
62        /* Text styling */
63        .text {
64            color: #ffffff;
65            font-size: 14px;
66            font-weight: 500;
67            letter-spacing: 0.2px;
68            z-index: 2;
69        }
70
71        /* Rotation keyframes */
72        @keyframes rotate {
73            0% {
74                transform: rotate(0deg);
75            }
76            100% {
77                transform: rotate(360deg);
78            }
79        }
80
81        /* Optional: subtle glow on the whole box */
82        .shiny-box {
83            box-shadow: 0 0 10px rgba(94, 200, 255, 0.1);
84        }
85    </style>
86</head>
87<body>
88
89    <div class="shiny-box">
90        <span class="text">Shiny Border</span>
91    </div>
92
93</body>
94</html>