Ressources pour développeur web

Théme de la semaine : WebDesign

Exemples de bouton like en CSS : WebDesign + Code complet

Temps de lecture estimé : 9 minutes
Accueil → CSS3 → Exemples de bouton like en CSS : WebDesign + Code complet

Vous cherchez un exemple de bouton like en CSS pur simple à intégrer sur votre site ? Dans ce tutoriel frontend, découvrez deux modèles complets de bouton like animés, modernes et sans JavaScript. Une solution idéale pour améliorer le design, l’interactivité et l’expérience utilisateur de vos pages web.

  • Coder un bouton interactif moderne uniquement avec HTML et CSS, sans dépendre de JavaScript.
  • Découvrir deux styles prêts à l’emploi pour améliorer immédiatement le design et l’expérience utilisateur d’un site web.
  • Apprendre à personnaliser facilement couleurs, formes et animations pour adapter le rendu à vos propres projets.

Créer un bouton like moderne sans JavaScript, c’est possible. Et même mieux : c’est souvent plus léger, plus rapide et plus simple à maintenir. Si vous débutez en développement web, ce type de mini-projet est parfait pour progresser en HTML et CSS tout en obtenant un résultat concret, joli et satisfaisant.

Dans ce tutoriel, vous allez découvrir deux exemples complets de bouton like en CSS pur. Le premier utilise un cœur animé. Le second reprend le célèbre pouce en l’air avec un design plus moderne. Nous allons détailler le code, comprendre chaque ligne importante et apprendre à personnaliser vos propres boutons interactifs.

Pourquoi créer un bouton like en CSS pur ?

Quand on pense à un bouton like, on imagine souvent du JavaScript, une base de données, des compteurs ou des API. Pourtant, pour l’animation visuelle et l’interaction utilisateur, d’un point de vue frontend, HTML + CSS suffisent déjà largement.

Un bouton like en CSS pur permet :

  • d’ajouter une interaction moderne à une page
  • d’améliorer l’expérience utilisateur
  • d’apprendre les transitions et animations CSS
  • de garder un site léger et rapide
  • de créer un prototype avant une vraie version dynamique

Autrement dit, vous codez le style avant même de gérer la logique.

Le principe technique utilisé

Avant de voir le code, il faut comprendre l’astuce.

Nous allons utiliser :

  • une case à cocher cachée (checkbox)
  • un label relié à cette case
  • le pseudo-sélecteur CSS :checked

Quand l’utilisateur clique sur le label, la case change d’état. Ensuite, CSS détecte si elle est cochée… et applique les animations.

Principe du bouton like
  • C’est malin, propre, et sans JavaScript.

Premier exemple : Une bouton like CSS avec un cœur animé

Voici un premier bouton like simple et élégant :

La base : le code HTML

<div class="like-wrapper">
    <input type="checkbox" id="like" class="like-checkbox">
    
    <label for="like" class="like-button">
        <span class="heart">❤</span>
        <span class="like-text">J'aime</span>
    </label>
</div>

La balise :

<input type="checkbox">

sert de déclencheur invisible.

Le label possède :

for="like"

Cela signifie qu’un clic sur le bouton agit sur la checkbox.

À l’intérieur du label :

  • un cœur
  • le texte “J’aime”

Simple, propre, efficace.

Code CSS principal

.like-checkbox {
    display: none;
}

.like-button {
    padding: 16px 24px;
    border-radius: 999px;
    background: white;
    border: 2px solid pink;
    cursor: pointer;
    transition: 0.3s;
}

Pourquoi cacher la checkbox ?

La case native n’est pas jolie. On la masque avec :

display: none;

Puis on transforme le label en vrai bouton designé.

Changement au clic

.like-checkbox:checked + .like-button .heart {
    color: red;
    transform: scale(1.15);
}

Ici :

Quand on clique :

  • le cœur devient rouge
  • il grossit légèrement

Et là, magie.

Animation pop

@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1.15); }
}

Cette animation donne un effet rebond.

Le cœur :

  1. démarre normal
  2. grossit fort
  3. revient légèrement plus grand

C’est ce petit détail qui rend un bouton like vivant.

Le code complet

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouton Like animé</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #fdf2f8, #fce7f3);
            font-family: Arial, sans-serif;
        }

        .like-wrapper {
            position: relative;
        }

        .like-checkbox {
            display: none;
        }

        .like-button {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 24px;
            background: #ffffff;
            border: 2px solid #f9a8d4;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
            user-select: none;
        }

        .like-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .heart {
            font-size: 32px;
            line-height: 1;
            color: #d1d5db;
            transform-origin: center;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .like-text {
            font-size: 18px;
            font-weight: bold;
            color: #374151;
            transition: color 0.3s ease;
        }

        .like-checkbox:checked + .like-button {
            border-color: #ec4899;
        }

        .like-checkbox:checked + .like-button .heart {
            color: #e11d48;
            animation: pop 0.4s ease;
            transform: scale(1.15);
        }

        .like-checkbox:checked + .like-button .like-text {
            color: #be185d;
        }

        .like-checkbox:checked + .like-button::after,
        .like-checkbox:checked + .like-button::before {
            content: "❤";
            position: absolute;
            color: rgba(225, 29, 72, 0.35);
            font-size: 18px;
            pointer-events: none;
            animation: burst 0.7s ease forwards;
        }

        .like-checkbox:checked + .like-button::before {
            top: -10px;
            left: 20px;
        }

        .like-checkbox:checked + .like-button::after {
            top: -8px;
            right: 20px;
            animation-delay: 0.05s;
        }

        @keyframes pop {
            0% {
                transform: scale(1);
            }
            40% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1.15);
            }
        }

        @keyframes burst {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0.5);
            }
            30% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translateY(-25px) scale(1.4);
            }
        }
    </style>
</head>
<body>

    <div class="like-wrapper">
        <input type="checkbox" id="like" class="like-checkbox">
        <label for="like" class="like-button">
            <span class="heart">❤</span>
            <span class="like-text">J'aime</span>
        </label>
    </div>

</body>
</html>

Deuxième exemple : un bouton like CSS avec le pouce

Passons maintenant à un design plus professionnel :

La base de notre bouton like : le code HTML

<input type="checkbox" id="like" class="like-toggle">

<label for="like" class="like-btn">
    <svg class="thumb">
        ...
    </svg>

    <span class="like-text">J'aime</span>
</label>

Pourquoi utiliser SVG ?

Le SVG permet d’afficher une icône nette à toutes les tailles.

Contrairement à une image PNG :

  • pas de flou
  • léger
  • personnalisable en CSS
  • idéal pour les icônes

Le pouce en l’air est donc dessiné en SVG.

Design du bouton

.like-btn {
    padding: 14px 22px;
    border-radius: 50px;
    background: white;
    border: 2px solid #c7d2fe;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

Ce style apporte :

  • coins arrondis modernes
  • ombre douce
  • fond propre
  • look application mobile

Clairement plus premium.

Effet hover

.like-btn:hover {
    transform: translateY(-2px);
}

Quand la souris passe dessus, le bouton remonte légèrement.

  • Petit effet subtil, gros impact visuel.

Activation du like

.like-toggle:checked + .like-btn .thumb {
    fill: #3b82f6;
    stroke: #3b82f6;
}

Quand on clique :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
  • le contour devient bleu
  • l’intérieur se remplit
  • le bouton paraît validé

C’est très proche des interfaces modernes.

Effet onde visuelle

.like-btn::after {
    content: "";
    position: absolute;
}

Puis :

.like-toggle:checked + .like-btn::after {
    transform: scale(1);
    opacity: 1;
}

Cela crée un halo derrière le bouton. Ainsi, l’action semble plus dynamique.

Le code complet HTML + CSS

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouton Like 👍</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* INPUT CACHÉ */
.like-toggle {
    display: none;
}

/* BOUTON */
.like-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 50px;
    background: white;
    border: 2px solid #c7d2fe;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.like-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* TEXTE */
.like-text {
    font-weight: 600;
    color: #374151;
    transition: color 0.3s ease;
}

/* ICONE */
.thumb {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #9ca3af;
    stroke-width: 2;
    transition: all 0.3s ease;
}

/* CERCLE D'ANIMATION */
.like-btn::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 50%;
}

/* ETAT LIKE */
.like-toggle:checked + .like-btn {
    border-color: #3b82f6;
}

/* POUCE ANIMÉ */
.like-toggle:checked + .like-btn .thumb {
    fill: #3b82f6;
    stroke: #3b82f6;
    animation: pop 0.4s ease;
    transform: scale(1.1);
}

/* TEXTE ACTIF */
.like-toggle:checked + .like-btn .like-text {
    color: #1d4ed8;
}

/* EFFET ONDE */
.like-toggle:checked + .like-btn::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ANIMATION POP */
@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1.1); }
}
</style>
</head>

<body>

<input type="checkbox" id="like" class="like-toggle">

<label for="like" class="like-btn">
    
    <!-- SVG pouce -->
    <svg class="thumb" viewBox="0 0 24 24">
        <path d="M14 9V5a3 3 0 0 0-3-3l-1 6-4 4v9h11a3 3 0 0 0 3-3v-7a2 2 0 0 0-2-2h-4z"/>
    </svg>

    <span class="like-text">J'aime</span>

</label>

</body>
</html>

Pourquoi ces boutons plaisent autant ?

Un bon bouton like n’est pas juste décoratif, il donne un retour immédiat :

  • j’ai cliqué
  • mon action est prise en compte
  • l’interface répond

Sans animation, un bouton paraît mort. Avec animation, il semble intelligent. Même un petit pouce peut améliorer votre UX.

Comment personnaliser votre bouton like

Changer les couleurs

Par exemple :

border-color: green;
color: green;

Vous pouvez créer :

  • un bouton like vert
  • un bouton like violet
  • un bouton like sombre
  • un bouton like pastel

Modifier la taille

padding: 20px 30px;
font-size: 20px;

Plus grand pour mobile, plus discret pour blog.

Changer le texte

J'aime

devient :

Valider
Favori
Recommander
Soutenir

Le même principe fonctionne partout.

Où utiliser un bouton like ?

Sur un blog comme le Créa-blog, vous pouvez l’utiliser :

  • sous un article
  • sur une fiche tutoriel
  • dans une page portfolio
  • pour noter un exercice
  • sur un projet étudiant

Imaginez :

“Ce tutoriel vous a aidé ? 👍”

Simple et efficace.

Et si je veux un vrai compteur ?

Le CSS pur gère le visuel, pas la sauvegarde.

Pour compter les likes réels, il faudra ajouter :

  • JavaScript
  • PHP
  • MySQL
  • AJAX

Mais bonne nouvelle : vous avez déjà l’interface. C’est souvent la partie la plus longue à peaufiner.

Erreurs fréquentes des débutants

  • Tout faire en JavaScript : C’est I-inutile ici. Le CSS suffit.
  • Oublier le label : Sans label, le clic devient moins ergonomique.
  • Animation trop brutale, Utilisez toujours :
transition: 0.3s ease;

Le “ease” change tout.

  • Trop d’effets : Un bouton like n’est pas un feu d’artifice. Restez élégant.

Bonus : version ultra simple

Si vous débutez totalement :

<input type="checkbox" id="like">
<label for="like">👍 J'aime</label>

Puis :

input:checked + label {
    color: blue;
}

Et voilà. Premier bouton like terminé.

  • Parfois le code simple est le meilleur professeur.

SEO : pourquoi intégrer un bouton like sur votre site ?

Indirectement, un bouton like peut améliorer :

  • engagement utilisateur
  • temps passé sur page
  • interactions
  • perception moderne du site

Google ne classe pas “le like CSS”, mais il aime les visiteurs satisfaits.

  • Et un site agréable retient plus longtemps.

Conseils Créa-blog pour aller plus loin

Quand vous maîtrisez ce système, testez :

Le principe checkbox + label + CSS est redoutable. Beaucoup de développeurs l’utilisent encore aujourd’hui.

Le code complet est-il réutilisable ?

Oui, totalement. Vous pouvez intégrer ces boutons like dans :

  • WordPress
  • site vitrine
  • landing page
  • boutique
  • portfolio
  • projet personnel

Il suffit de copier le HTML et le CSS.

Créer un bouton like en CSS pur est un excellent exercice. Vous progressez en sélecteurs, transitions, animations, structure HTML et expérience utilisateur. En prime, vous obtenez un élément moderne et réutilisable immédiatement sur vos projets.

Retenez surtout ceci : inutile de complexifier trop tôt. Beaucoup de débutants pensent qu’il faut forcément JavaScript pour rendre une interface vivante. La vérité est souvent plus simple. Avec un peu de CSS bien pensé, vous pouvez déjà faire des merveilles.

👉 Continuez sur votre lancée : Coder un bouton avec effet Liquid Glass en CSS !

Articles relatifs

  1. Design pagination : 4 exemples CSS modernes + Code complet
    Améliorez le design de vos pagination avec 4 exemples modernes en CSS. Apprenez à créer une navigation fluide, responsive et efficace pour booster l’expérience utilisateur et le référencement naturel de…
  2. Nouveautés CSS : @property, type safety et animation déclarative
    Découvrez les nouveautés CSS : @property, type safety et animations déclaratives. Apprenez à créer des interfaces fluides, dynamiques et performantes, sans JavaScript, grâce à des techniques modernes et accessibles à…
  3. Formulaire web : 8 Exemples de code HTML et CSS responsive
    Découvrez 8 exemples inspirants de formulaires web modernes et 100 % responsive. Apprenez à créer facilement des mises en page élégantes, accessibles et adaptées à tous les écrans, grâce à…
  4. Keyframes CSS : Guide complet des animations web
    Découvrez comment créer des animations CSS fluides et interactives avec les keyframes. Apprenez pas à pas à animer textes, boutons et images pour rendre votre site web dynamique et captivant….