Lorsque j'ai réalisé le design de notre page d'accueil TheKeptPromise, nous devions disposer de un à trois boutons pour chaque application présentée, selon le cas. Je souhaitais éviter l'utilisation de trois boutons séparés pour des raisons esthétiques et pour moi, un look en « capsule » était plus élégant et intéressant à utiliser. La solution était d'utiliser les “Segmented Controls” (littéralement « contrôles segmentés »). Généralement, il s'agit d'un simple visuel de bouton partagé horizontalement (notez qu'il pourrait l'être verticalement).

Les contrôles segmentés sont très pratiques pour construire des menus ou boutons multiples qui fonctionnent parfaitement collés les uns aux autres.
Quel que soit le nombre d'éléments qui seront ajoutés dans le groupe, l'aspect restera toujours parfait et s'adaptera tant au premier élément, qu'au dernier et aux intermédiaires, sans jamais avoir besoin de rajouter des classes spécifiques.

Ce qu'il faut

Côté HTML, c'est simple, il suffit de créer un élément parent qui contient tous les segments.
(Dans mon cas .taz_sgmtGrp et .taz_sgmtBtn)

<div class="taz_sgmtGrp">
	<button class="taz_sgmtBtn">Action 1</button>
	<button class="taz_sgmtBtn">Action 2</button>
	<button class="taz_sgmtBtn">Action 3</button>
</div>
// Fonctionne de la même manière avec une liste (comme un menu) ou quoi que ce soit d'autre.
<ul class="taz_sgmtGrp">
	<li class="taz_sgmtBtn"><a href="#">Action 1</a></li>
	<li class="taz_sgmtBtn"><a href="#">Action 2</a></li>
	<li class="taz_sgmtBtn"><a href="#">Action 3</a></li>
</ul>

Du côté CSS, plus vous connaîtrez le language et plus vous vous amuserez.
Ici, tout est intégralement stylé en CSS, aucune image n'est utilisée.

Note

Jetez un œil au code CSS de chaque variante ici proposée. En fonction de ce que vous comptez réaliser, il sera possible de styler les boutons seuls ou à la fois les boutons et leur parent. Par ailleurs, certains designs fonctionnent mieux si un élément ne passe jamais à la ligne, comme cela peut arriver si la zone d'affichage devient trop étroite.

See the Pen Segmented Controls by Édouard Puginier (@Tazintosh) on CodePen.light