Jak zrobić przyciski jak na relume.ai?

Użyj CSS z tej strony: główny przycisk ma tło #ff00f4, tekst #ffffff, zaokrąglenie 6px i wysokość 32px. Dodaj reguły hover i focus wypisane pod każdym wariantem i ustaw na przycisku czcionkę, której używa relume.ai.

Jakiego koloru są przyciski relume.ai?

Główny przycisk na relume.ai ma tło #ff00f4 i tekst #ffffff. Strona używa łącznie 3 wariantów przycisków; każdy jest wypisany na tej stronie ze swoim tłem, obramowaniem, zaokrągleniem i rozmiarem.

Czy agent AI do kodowania może skopiować przyciski relume.ai?

Tak. Pakiet designu relume.ai ze Stylepack zawiera każdy wariant przycisku z jego stanami, czcionki, kolory i zrzuty ekranu, więc Claude Code, Cursor lub Copilot może zbudować pasujące przyciski.

CSS przycisków relume.ai: zrób takie same przyciski

Przycisk primary

Generate Website

Hover: moves down 1px
Focus: outline 1px auto rgb(16, 16, 16)
Przejście: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Przycisk secondary

Dowiedz się więcej

Hover: brak widocznej zmiany
Przejście: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Przycisk ghost

Aura Trails

Hover: brak widocznej zmiany

CSS

Jedna klasa na wariant, ze zmierzonymi wartościami. Czcionka to ta, którą relume.ai ustawia na swoich przyciskach.

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}

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

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

Przyciski na relume.ai