Organic Button Set
Quatre vrais boutons de 43 px de haut découpés en superellipses d'exposant 3, 4 et 5 puis en biseau de 8 px (quatre clip-path: polygon()), du plus rond au plus anguleux : un jeu de boutons qui hiérarchise par la forme autant que par la couleur, sans SVG ni JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Quatre <button class="organic-btn"> (marges internes 14 × 28 px, texte de 12,8 px en graisse 700, sans bordure) : 43 px de haut et 105 à 127 px de large selon le libellé (mesuré). Chaque variante appelle sa variable : --obt-squircle-soft (n = 3), --obt-squircle (n = 4) et --obt-squircle-tight (n = 5) sont des superellipses de 64 points en pourcentages tracées sur toute la boîte ; --obt-bevel-sm est un biseau de 8 px en pixels (huit points en calc()). Plus l'exposant monte, plus les côtés se tendent : la forme retire 11,7 %, 7,3 % puis 5 % de la boîte (calcul ; mesuré dans Chromium 151 : 10,4, 6,9 et 5,3 %), le biseau 2,8 %. Sur un bouton trois fois plus large que haut, la superellipse s'étire : n = 3 se lit presque comme une ellipse, n = 5 comme une pilule aux flancs droits.
Les couleurs : violet #8b5cf6 → #a78bfa (n = 3), rose #ec4899 → #f472b6 (n = 4), cyan #06b6d4 → #22d3ee (n = 5), texte blanc ; ambre #f59e0b → #fbbf24 pour le biseau, texte #1a1a2e. Au survol : montée de 3 px, scale(1.04), brightness(1.15) en 0,4 s avec rebond ; à l'appui : translateY(1px) scale(0.97). La transition prévoit aussi clip-path 0.5s : rien ne change de forme dans le code vendu, mais si vous passez un bouton d'une variable à une autre (état choisi), les trois superellipses ayant 64 points dans le même ordre, le changement s'anime.
Les quatre formes sont des variables CSS (--obt-squircle-soft, --obt-squircle, --obt-squircle-tight, --obt-bevel-sm), sans SVG ni id. Un effet qui repose entièrement sur la différence de forme ne peut pas dépendre de <clipPath> à fournir à part : absents de la page, ils laisseraient quatre rectangles identiques, coin cliquable compris. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : la découpe s'applique, et le coin ne reçoit pas le clic.
Accessibilité
- L'anneau de focus est rogné :
clip-pathcoupe tout ce qui dépasse de la forme, contour compris. Mesuré au clavier : dans Firefox 153, aucun pixel ne change quand le bouton reçoit le focus ; dans Chromium 151, il ne reste que deux traits sur les flancs (169 pixels sur 6 490). Ajoutez un indicateur intérieur :.organic-btn:focus-visible { filter: brightness(1.25); box-shadow: inset 0 0 0 3px #fff }— l'ombre intérieure, elle, reste dans la forme. - Contraste du texte blanc de 12,8 px (seuil 4,5:1) : 4,2:1 sur le départ violet, 3,5:1 sur le rose, 2,4:1 sur le cyan, et 1,8:1 sur la fin cyan
#22d3ee. Seul le biseau ambre (texte sombre, 7,9:1) passe. Les scènes de cette page assombrissent les quatre dégradés. - Forme et sens : la courbure peut suggérer une gradation (facile → expert), mais un lecteur d'écran ne la perçoit pas. Le libellé doit dire le niveau. Ce sont de vrais
<button>: Tab les atteint (mesuré), Entrée et Espace les activent nativement. Pour un choix exclusif, ajoutezaria-pressedou passez à des boutons radio stylés. Pas deprefers-reduced-motion: la montée de 3 px reste active sous la préférence (mesuré).
Compatibilité navigateur
CSS seul : clip-path: polygon() en pourcentages et en calc(), propriétés personnalisées, dégradés, filter: brightness(), transform. Zéro JavaScript, zéro SVG. Formes mesurées identiques dans Chromium 151, Firefox 153 et WebKit 26.
Sans clip-path (Firefox avant 54, Safari avant 13.1 sans préfixe), les quatre boutons redeviennent des rectangles : ils fonctionnent, mais la hiérarchie par la forme disparaît — gardez donc toujours une différence de couleur ou de libellé.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="organic-btns-wrap">
<button class="organic-btn organic-btn--soft">…</button>
<button class="organic-btn organic-btn--standard">…</button>
<button class="organic-btn organic-btn--tight">…</button>
<button class="organic-btn organic-btn--bevel">…</button>
</div>
</div>Le code complet HTML + CSS + JS de Organic Button Set, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Exposants (CSS — --obt-squircle-soft, --obt-squircle, --obt-squircle-tight) |
n = 3, 4, 5 (64 points chacun) | Pour un autre exposant, recalculez les 64 points : x = 50 + 50·signe(cos t)·|cos t|^(2/n), y = 50 + 50·signe(sin t)·|sin t|^(2/n), pour t = 180° + i × 5,625°. n = 2 donne une ellipse, n = 8 un rectangle aux coins à peine adoucis. |
Biseau (CSS — --obt-bevel-sm) |
8 px à chaque coin | Remplacez les huit 8px ; au-delà de 12 px sur un bouton de 43 px, le biseau mord sur le texte ; au-delà de 21 px (la moitié de la hauteur), les flancs disparaissent et il devient un hexagone. |
Couleurs (CSS — .organic-btn--soft, --standard, --tight, --bevel) |
violet, rose, cyan, ambre | Partez d'une couleur sombre pour garder le texte blanc au-dessus de 4,5:1 (voir accessibilité). |
Taille (CSS — padding de .organic-btn) |
14 × 28 px, 43 px de haut | Les superellipses suivent la boîte. Plus le bouton est large par rapport à sa hauteur, plus les coins s'allongent : pour des coins de taille fixe, utilisez une superellipse par coin en calc(), comme le biseau. |
Survol et appui (CSS — :hover, :active) |
−3 px et ×1,04 au survol, +1 px et ×0,97 à l'appui | Pour un état choisi, ajoutez .organic-btn[aria-pressed="true"] { clip-path: var(--obt-squircle-tight) } : la transition de 0,5 s déjà prévue anime le passage. |
FAQ
clip-path découpe tout ce qui sort de la forme, y compris l'outline dessiné autour du bouton. Mesuré : aucun pixel de différence dans Firefox, deux traits fins sur les flancs dans Chromium. La solution est un indicateur à l'intérieur de la forme : box-shadow: inset 0 0 0 3px #fff et un changement de luminosité sur :focus-visible.--obt-squircle-soft (n = 3) à l'action principale, la plus ronde et la plus « amicale », et donnez aux actions secondaires une courbe plus tendue (n = 4 ou 5), plus discrète. Le biseau, seule forme à angles vifs, se lit comme une exception : gardez-le pour une action à part (supprimer, expert, livraison spéciale), comme dans les scènes. Sur un seul bouton isolé, n = 4 et n = 5 se distinguent mal (voir la première question) : la hiérarchie par la forme fonctionne en série, doublée par la couleur ou la taille.
