Les boutons CSS sont la première chose avec laquelle les visiteurs interagissent sur un site web. Un bon bouton attire le regard, incite à l’action et fonctionne sans JavaScript sur mobile. Un mauvais bouton se fond dans l’arrière-plan et ne donne aucun retour lorsqu’on appuie dessus. Pourtant, la plupart des boutons se ressemblent: un rectangle plat, un changement de couleur au survol, et c’est tout. Mais un bouton peut être un élément de design à part entière, avec une animation, un effet 3D, un remplissage en dégradé ou une icône qui glisse au survol.

L’un des ensembles de boutons créatifs les plus connus est CreativeButtons du studio Codrops. Il s’agit d’une collection de huit catégories de styles allant des bordures minimalistes aux transformations volumétriques en 3D. Le code source est ouvert, le code est propre et la page de démonstration fonctionne encore 13 ans après sa publication. Dans cet article, nous allons voir quels styles sont inclus dans l’ensemble, comment les ajouter à n’importe quel site et comment les intégrer à WordPress via functions.php.

💡 Aperçu rapide:

• Téléchargez l’archive depuis le dépôt GitHub de Codrops, qui contient tous les fichiers CSS et le balisage de démonstration
• Connectez component.css et default.css à votre projet, copiez le balisage HTML correspondant au style de bouton dont vous avez besoin
• Pour WordPress, ajoutez wp_enqueue_style dans le fichier functions.php de votre thème, en spécifiant le chemin vers les fichiers dans le dossier du thème
• Personnalisez les couleurs et les tailles pour les adapter à votre design: surchargez les propriétés CSS dans une feuille de style enfant
• Regardez le tutoriel sur les effets CSS pour boutons ci-dessous pour voir les animations en action

Qu’est-ce que CreativeButtons

Codrops a publié CreativeButtons en juin 2013 comme une démonstration des capacités expressives de CSS3. L’ensemble comprend huit catégories de styles, chacune résolvant sa propre problématique visuelle:

Chaque bouton est en pur HTML et CSS. Quelques styles (comme btn-4 avec une icône) utilisent du JavaScript pour basculer des classes au clic, mais la magie principale réside dans transition, transform et les pseudo-éléments ::before et ::after.

Les icônes de l’ensemble proviennent de la bibliothèque IcoMoon. Elles sont insérées via le pseudo-élément ::before avec un caractère issu d’une police d’icônes, ce qui évite de charger des fichiers SVG séparés.

Balisage HTML: un cadre universel

Le balisage des boutons est volontairement simple. Le développeur ajoute une classe commune et deux classes numérotées à un élément <button>:

1
<button class="btn btn-6 btn-6d">Button</button>

La classe btn réinitialise les styles du navigateur (bordure, contour, arrière-plan). La classe btn-6 contient les propriétés communes à la catégorie (bordure en pointillés, arrondi). La classe btn-6d est le style individuel pour un bouton spécifique au sein de la catégorie. Cette structure à trois niveaux permet de combiner des dizaines de variations avec une duplication de code minimale.

Si le bouton contient une icône, une autre classe est ajoutée, par exemple btn-4a icon-arrow-right. L’icône est rendue via ::before avec un caractère de contenu provenant de la police IcoMoon:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Une remarque importante: dans la version de démonstration, les classes sont séparées uniquement à des fins d’illustration. Dans un projet de production, les propriétés d’un même style doivent être regroupées dans une seule classe, ce qui réduit le poids des sélecteurs et simplifie les surcharges.

Styles CSS: de la réinitialisation à l’animation

La classe de base .btn fait le minimum: elle supprime l’arrière-plan, la bordure et le padding du navigateur, définit cursor: pointer et position: relative (pour le positionnement des pseudo-éléments). Toute l’expressivité provient des classes de catégorie et individuelles.

Voici un exemple de styles pour le bouton btn-6d (bordure en pointillés avec remplissage au survol):

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Pas de magie ici, juste transition et le changement des valeurs background et color au survol. Ce même principe est à la base des huit catégories. La différence réside dans les détails: certaines ajoutent transform: scale(), d’autres utilisent box-shadow pour la profondeur, et d’autres encore animent via @keyframes pour un cycle de pulsation infini.

Intégration à WordPress

Pour que les boutons fonctionnent dans un thème WordPress, vous devez télécharger les fichiers CSS dans le dossier du thème et les inclure via wp_enqueue_style. Créez un sous-dossier (par exemple, JS_CSS_Plugins/CreativeButtons/css/) dans le répertoire de votre thème actif et copiez-y component.css et default.css.

Ajoutez ensuite ceci dans functions.php:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

Les deux fonctions distinctes de l’exemple original ont été remplacées par une seule, ce qui rend le code plus propre et plus facile à maintenir. L’ordre d’inclusion est important: d’abord component.css (styles principaux des catégories), puis default.css (styles individuels des boutons). En cas de conflit avec votre thème, surchargez les propriétés nécessaires dans une feuille de style enfant avec une priorité plus élevée.

Alternatives modernes: ce qui a changé en 13 ans

CreativeButtons est un ensemble éprouvé, mais le CSS a beaucoup évolué depuis 2013. Si vous démarrez un nouveau projet en 2026, envisagez des outils plus modernes:

• Variables CSS. Au lieu de coder en dur #226fbe, utilisez var(--btn-primary). Cela simplifie les changements de palette de couleurs et la prise en charge du thème sombre.
• Propriétés logiques. padding-inline et margin-block au lieu de padding-left/right et margin-top/bottom, pour que le bouton s’affiche correctement dans les langues RTL sans code supplémentaire.
• prefers-reduced-motion. Encapsulez les animations dans une media query et désactivez-les pour les utilisateurs sensibles aux mouvements.
• Collections prêtes à l’emploi. Free Frontend maintient une collection de plus de 220 boutons CSS avec des démos CodePen, et Uiverse propose plus de 1900 options compatibles avec Tailwind.

Mais si vous avez besoin d’un ensemble minimaliste et compréhensible, qui ne dépend d’aucun framework, CreativeButtons reste un excellent choix. Le code peut être lu en une demi-heure, modifié pour n’importe quel design et n’a aucune dépendance.

Regardez ce court tutoriel sur les effets CSS au survol, des transitions de base aux animations complexes en pur CSS:

La vidéo montre clairement comment les animations de transition, de transformation et d’images clés fonctionnent sur les boutons. Après l’avoir visionnée, vous serez capable non seulement de reproduire les styles de CreativeButtons, mais aussi d’écrire vos propres effets à partir de zéro.

⁉️🤔 Foire aux questions

Puis-je utiliser CreativeButtons dans des projets commerciaux?

Oui, le code source est distribué librement. Le dépôt GitHub ne contient pas de licence explicite, mais Codrops publie les ressources de démonstration comme étant accessibles au public pour l’apprentissage et l’utilisation. Pour une certitude absolue, ajoutez un lien vers la source dans les commentaires de votre CSS.

Dois-je inclure les deux fichiers CSS?

Non. Si vous n’avez besoin que d’un seul style de bouton, copiez les règles CSS correspondantes dans la feuille de style principale de votre thème. component.css et default.css sont séparés pour faciliter la navigation dans la démo, pas par nécessité technique.

Comment changer la couleur du bouton pour l’adapter à ma marque?

Trouvez le sélecteur du style dont vous avez besoin dans default.css (par exemple, .btn-6d) et remplacez les valeurs color et border-color. Pour les styles en dégradé (btn-8), remplacez les couleurs dans background-image: linear-gradient(). Surchargez dans un thème enfant ou dans l’outil de personnalisation de WordPress (section «CSS additionnel»).

Les boutons fonctionnent-ils sur les appareils mobiles?

Oui, tous les effets sont basés sur :hover et transition, qui sont gérés correctement par les navigateurs mobiles. Gardez à l’esprit que les écrans tactiles n’ont pas d’état de survol en tant que tel: le navigateur applique les styles de survol au premier tap, et l’action se déclenche au second. Pour les boutons CTA critiques, utilisez des styles qui restent esthétiques même sans l’effet de survol.

Est-ce que ça vaut le coup d’utiliser CreativeButtons en 2026

CreativeButtons est un cas rare où du code de 2013 reste fonctionnel et utile. Les spécifications CSS sur lesquelles il repose (transition, transform et les pseudo-éléments) sont depuis longtemps devenues un standard et sont prises en charge par tous les navigateurs.

Utilisez cet ensemble si vous avez besoin de: prototypage rapide sans framework, une base de code claire pour former des développeurs juniors, ou des styles prêts à l’emploi pour un projet personnel qui ne nécessite pas un système de design de niveau entreprise. Pour un grand projet commercial, il est plus judicieux de choisir une collection moderne avec des variables CSS et une prise en charge intégrée de l’accessibilité.

Téléchargez CreativeButtons depuis GitHub et essayez l’une des huit catégories sur votre projet, du prototype à la production.