← back to Houdini Gradient Border Buttoncompare with ground truth →
model output
LLaMA 4 Scout
Houdini Gradient Border Button
A 0.36T 0.00
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 .shiny-border {
9 position: relative;
10 padding: 10px;
11 border: 2px solid #000;
12 width: fit-content;
13 }
14 .shiny-border::after {
15 content: "";
16 position: absolute;
17 width: 100%;
18 height: 100%;
19 top: 0;
20 left: 0;
21 border: 2px solid transparent;
22 border-color: #007bff;
23 animation: shine 2s linear infinite;
24 }
25 @keyframes shine {
26 0% {
27 transform: scale(1);
28 opacity: 0;
29 }
30 100% {
31 transform: scale(1.5);
32 opacity: 0;
33 }
34 }
35</style>
36</head>
37<body>
38
39<div class="shiny-border">Shiny Border</div>
40
41</body>
42</html>