Boutons
Des boutons en CSS pur, classés par style : survolez-les, puis copiez le code
1–24 sur 134
À propos de l'outil
Cette galerie réunit 134 boutons écrits en HTML et CSS pur, sans JavaScript ni bibliothèque. Ils sont classés en douze catégories : pleins, contours, dégradés, néon, remplissage, relief, ombres, animés, avec icône, liens, verre et ludiques. Chaque aperçu réagit au survol, ce qui permet de juger l’effet avant de copier le code dans votre projet.
Les couleurs se règlent en haut de la galerie : la couleur principale et celle du texte, avec un fond d’aperçu sombre ou clair. Dans le code, elles passent par deux variables CSS, --accent et --on-accent, que vous pouvez modifier ensuite dans votre feuille de style. La plupart des modèles utilisent une balise button, ceux de la catégorie Liens une balise a.
Comment l'utiliser
- Choisissez une catégorie, ou Tous pour voir l’ensemble des boutons.
- Réglez la Couleur et le Texte, puis le Fond Sombre ou Clair de l’aperçu.
- Survolez les aperçus et ouvrez le code du bouton choisi avec l’icône en bas à droite.
- Cliquez sur Copier le HTML et Copier le CSS, puis collez-les dans votre page et votre feuille de style.
Questions fréquentes
Faut-il du JavaScript ou un framework ?
Non. Chaque bouton se compose d’un extrait HTML et d’un bloc CSS autonome, effets de survol et animations compris. Ils fonctionnent dans n’importe quel projet, avec ou sans framework, tant que vous gardez la classe button.
Comment changer les couleurs après la copie ?
Le CSS copié commence par une règle qui définit --accent et --on-accent avec les couleurs choisies dans l’outil. Modifiez ces deux variables, dans cette règle ou plus haut dans votre feuille de style, pour adapter le bouton à votre charte.
Puis-je utiliser ces boutons dans un projet commercial ?
Les boutons sont des créations originales de MagicWebBox, publiées avec le reste du projet sous licence MIT. Vous pouvez les réutiliser, y compris dans un projet commercial, en respectant les conditions de cette licence.
Plusieurs boutons peuvent-ils cohabiter sur une page ?
Tous les modèles utilisent la même classe button. Si vous en combinez plusieurs, renommez la classe dans le HTML et le CSS de chacun pour éviter que leurs styles se mélangent.