web-dev-qa-db-fra.com

Style de bouton de menu extensible / accordéon minimaliste

J'essaie de créer une barre latérale/un panneau pour filtrer les produits et, dans l'ensemble, j'utilise un design minimaliste/plat. Voici la mise en page, réduite et développée.

enter image description here

Mon problème est que, comme vous pouvez le voir, le bouton accordéon (bouton filtre) est quelque peu invisible, surtout lorsqu'il est agrandi. Je veux que les utilisateurs se rendent compte qu'il peut être réduit à nouveau en cliquant à nouveau dessus. Avez-vous une idée de son design pour le rendre audacieux mais toujours simple/minimaliste? Je ne pense pas que je puisse utiliser un design de bouton arrondi régulier car ce n'est pas tout à fait un bouton (?).

Merci, toute idée appréciée! :)

3
Dolorosa

Vous pouvez donner une couleur à l'arrière-plan du contenu à l'intérieur du panneau d'accordéon, comme # f4f4f4 ou gris clair qui améliorera la profondeur et plus visible. enter image description here

4
Rob H. Yamin

Une alternative est de faire comme conception de matériaux traite des panneaux d'extension:

Comme vous pouvez le voir lorsqu'un panneau est développé, il se sépare des autres pour résoudre ce problème.

4
Alvaro