Comment faire des boutons comme relume.ai ?

Utilisez le CSS de cette page : le bouton principal est #ff00f4 avec du texte #ffffff, des coins de 6px, 32px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que relume.ai utilise.

De quelle couleur sont les boutons de relume.ai ?

Le bouton principal de relume.ai est #ff00f4 avec du texte #ffffff. Le site utilise 3 variantes de bouton au total ; chacune est listée sur cette page avec son fond, sa bordure, son arrondi et sa taille.

Un agent de code IA peut-il copier les boutons de relume.ai ?

Oui. Le pack de design de relume.ai sur Stylepack contient chaque variante de bouton avec ses états, les polices, les couleurs et les captures, pour que Claude Code, Cursor ou Copilot puissent créer des boutons identiques.

CSS des boutons relume.ai : des boutons comme les leurs

Bouton primary

Generate Website

Survol: moves down 1px
Focus: outline 1px auto rgb(16, 16, 16)
Transition: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Bouton secondary

Survol: aucun changement visible
Transition: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Bouton ghost

Aura Trails

Survol: aucun changement visible

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que relume.ai applique à ses boutons.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 6px 12px;
7  background: #ff00f4;
8  color: #ffffff;
9  border: none;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Geist Variable", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 88px;
22  padding: 0px 0px;
23  background: #ffffffeb;
24  color: #101010;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Geist Variable", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 25px;
39  padding: 0px 8px;
40  background: transparent;
41  color: #161616;
42  border: none;
43  border-radius: 6px;
44  font-size: 14px;
45  font-weight: 400;
46  font-family: "Geist Variable", sans-serif;
47  cursor: pointer;
48}

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

curl -s https://stylepack.ai/packs/relume.ai/DESIGN.md

Les boutons de relume.ai