Stylepack

Przyciski

Przyciski na how.studio

Główny przycisk na how.studio ma tło #ecffb4, tekst #333333, zaokrąglenie 6px i wysokość 40px. Poniżej: każdy wariant przycisku, jakiego używa strona, jego stany hover i focus oraz CSS, dzięki któremu Twoje będą wyglądać tak samo.

Zmierzono na how.studio 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Przycisk secondary

Start a project
Hover
brak widocznej zmiany

Przycisk ghost

Services
Hover
brak widocznej zmiany

CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 13px 16px;
  background: #ecffb4;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  background: transparent;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", sans-serif;
  cursor: pointer;
}

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/how.studio/DESIGN.md

Pytania

Jak zrobić przyciski jak na how.studio?

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

Jakiego koloru są przyciski how.studio?

Główny przycisk na how.studio ma tło #ecffb4 i tekst #333333. Strona używa łącznie 2 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 how.studio?

Tak. Pakiet designu how.studio 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.