Stylepack

Boutons

Les boutons de apple.com

Le bouton principal de apple.com est #0071e3 avec du texte #ffffff, des coins de 980px et 44px de haut. Ci-dessous : chaque variante de bouton du site, ses états de survol et de focus, et le CSS pour que les vôtres aient la même allure.

Mesuré sur apple.com il y a 4 jours.

Ouvrir le pack de design completTélécharger le pack

Bouton primary

Learn more
Survol
background #0071e3 → #0076df
Focus
outline 2px solid rgb(0, 113, 227), offset 3px
Transition
all, 0s

Bouton secondary

Shop
Survol
background transparent → #0076df, text #2997ff → #ffffff, border #2997ff → transparent
Transition
all, 0s

Le CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: #0071e3;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 21px;
  background: transparent;
  color: #2997ff;
  border: 1px solid #2997ff;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  font-family: "SF Pro Text", sans-serif;
  cursor: pointer;
}

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/apple.com/DESIGN.md

Questions

Comment faire des boutons comme apple.com ?

Utilisez le CSS de cette page : le bouton principal est #0071e3 avec du texte #ffffff, des coins de 980px, 44px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que apple.com utilise.

De quelle couleur sont les boutons de apple.com ?

Le bouton principal de apple.com est #0071e3 avec du texte #ffffff. Le site utilise 2 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 apple.com ?

Oui. Le pack de design de apple.com 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.