Bonsoir au forum,
En visitant un peu les articles sur les flat button (qui sont très sympa), je suis tombé sur ca :
http://tympanus.net/Development/CreativeButtons/
Je trouve ces boutons ... fantastique! J'ai un peu analysé le code, mais je ne comprends pas comment il fait pour créer des icones comme ca, des bordure qui s'étendent, les coeurs dans les boutons etc.
Si vous pouvez m'expliquer 2, 3 boutons ou juste m'expliquer leur fonctionnement en général, j'apprécirais beaucoup.
(Si vous avez du temps et l'envie, c'est long)
Je désires juste qu'on m'explique par exemple, comment faire l'animation de transition dans les premiers boutons ou encore le principe des 3d boutons en bas (surtout le dernier tout en bas à gauche)
Merci de vos réponses (j'attendrai le temps qu'il faudra)
Lens Durandisse
Je vais aller voir la video, un GRAND merci :)
(Je ne ferme pas le sujet, en cas d'autre réponse)
Bonjour,
Les sources sont dispos:
https://github.com/codrops/CreativeButtons
Sinon quelques pistes en vidéos :
Merci bcp Green
Merci, Xoomy, je vais tout de suite matter.
Ah Tympanus, un super site (j'y vais très régulièrement). Il y a énormément de ressources, d'articles et de jolies démos dessus. Cependant, c'est vrai que pour certains cas ça peut être assez compliqué à reproduire. Bref.
Les animations de la plupart de ces boutons repose sur les transformations et transitions CSS et sur des actions sur les pseudo-élements ::before et ::after, il te faut commencer par là si tu veux mon avis :)
[https://developer.mozilla.org/fr/docs/Web/CSS/transition]()
[https://developer.mozilla.org/fr/docs/Web/CSS/Utilisation_des_transformations_CSS]()
Pour ce qui est des jolies icônes, je te conseille cette excellentissime librairie: [http://fortawesome.github.io/Font-Awesome/icons/]()
En espérant avoir pu t'aider ;)
Ahhhh, une merveille ces transitions _ J'ai vu la doc et je comprends merci :)
Essaye d'intégrer le 2 dans un site... :p
@Devlose j'aime beaucoup tes petits effets, vraiment sympa et je pense que ça peut s'intégrer à merveille dans un projet au design "cartoonesque" :)
Faudra que je travailles les pseudos-éléments, on est pas très ami
@Lens Durandisse : C'est super simple tu verra, et une fois que tu y as goûté, tu ne peux plus t'en passer ! :)
Pour se réconcilier définitivement et avec brio avec les pseudo-classes et les pseudo-éléments, méchante ressource : http://tympanus.net/codrops/css_reference/
Merci tout le monde, je vais mater tout ca