Depuis quelques années, le design d’interface s’inspire énormément des effets visuels des systèmes d’exploitation modernes. Apple, par exemple, adore jouer avec la transparence, la lumière et les effets de verre depuis iOS 26 et macOS Tahoe. Les interfaces donnent l’impression d’être fluides, lumineuses et presque vivantes. Parmi ces tendances, on va coder un style très apprécié : le bouton Liquid Glass CSS, inspiré du design d’Apple.
- Reproduire l’effet liquid glass inspiré d’iOS avec du CSS moderne pour donner immédiatement un style élégant et actuel à vos interfaces web.
- Apprendre à créer un bouton visuellement interactif et dynamique, capable de réagir au survol et d’apporter une sensation de fluidité proche des interfaces d’applications mobiles.
- Améliorer le design de vos interfaces grâce à quelques propriétés CSS puissantes permettant de transformer un simple bouton en élément d’interface moderne.
Ce type de bouton CSS avec effet Liquide Glass combine plusieurs effets visuels : transparence, flou, reflets lumineux et animation douce. Le résultat est élégant, moderne et étonnamment simple à coder.
Dans ce tutoriel, vous allez apprendre pas à pas à créer un bouton avec un effet liquide glass en CSS, même si vous débutez totalement en développement front-end.
Comprendre l’effet “liquid glass”
Avant d’écrire du code, prenons quelques secondes pour comprendre ce qui crée cet effet visuel originaire d’Apple.
Un bouton liquid glass en CSS repose généralement sur plusieurs éléments :
- une transparence
- un flou d’arrière-plan
- un dégradé lumineux
- une bordure subtile
- un effet de lumière au survol
Ces éléments combinés donnent l’impression que le bouton est fait de verre ou de gel, posé sur l’interface.
En CSS, trois propriétés jouent un rôle essentiel :
backdrop-filterbackgroundavec transparencebox-shadow
Si ces noms vous semblent intimidants, rassurez-vous : nous allons les comprendre ensemble simplement.
Structure HTML du bouton
Commençons par la base : le HTML.
Un bouton peut être créé avec une balise <button> ou <a>. Pour ce tutoriel, nous allons utiliser un bouton classique. Voici la structure minimale :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bouton Liquid Glass</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="liquid-button">
Télécharger
</button>
</div>
</body>
</html>Prenons le temps de comprendre.
- La classe
containersert simplement à centrer le bouton sur la page. - La classe
liquid-button, elle, sera utilisée pour appliquer notre effet glass en CSS.
Pour l’instant, ce bouton sera très simple visuellement. Mais ne vous inquiétez pas : la magie arrive avec le CSS.
Mise en place du style de base
Créons maintenant le fichier style.css.
Avant de travailler le bouton, nous allons préparer la page.
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#4facfe,#00f2fe);
font-family:Arial, Helvetica, sans-serif;
}
.container{
text-align:center;
}Nous supprimons la marge du navigateur avec margin:0. Ensuite, nous utilisons Flexbox pour centrer le contenu de la page.
👉 Pour en savoir plus : Mise en page avec Flexbox
height:100vh signifie que la page prend 100% de la hauteur de l’écran.
👉 Aller plus loin avec Les unités CSS et Les unités viewport en CSS
Le fond utilise un dégradé de couleurs, car l’effet glass fonctionne beaucoup mieux lorsqu’il y a des couleurs derrière le bouton. Sans arrière-plan, le flou serait… invisible.
Création du bouton liquid glass CSS
Passons maintenant au cœur du sujet : le bouton liquide glass CSS.
Voici le style principal :
.liquid-button{
padding:16px 40px;
font-size:18px;
color:white;
border:none;
border-radius:40px;
cursor:pointer;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.3);
box-shadow:
0 8px 32px rgba(0,0,0,0.2);
transition:all 0.3s ease;
}Il y a plusieurs lignes… mais chacune a un rôle très simple.
Padding et taille du bouton
padding:16px 40px;Cette propriété ajoute de l’espace à l’intérieur du bouton.
- 16px en haut et en bas
- 40px à gauche et à droite
Le bouton devient plus large et agréable à cliquer.
👉 Pour ceux qui débutent : Margin, padding et gap
Les bords arrondis
border-radius:40px;Cette propriété arrondit les angles.
- Plus la valeur est grande, plus l’effet est arrondi.
Dans les interfaces modernes (iOS, Android, etc.), les boutons sont souvent très arrondis, ce qui renforce l’impression de douceur.
La transparence du verre
Voici la ligne importante :
background:rgba(255,255,255,0.15);rgba signifie :
- Red
- Green
- Blue
- Alpha (transparence)
Ici :
255,255,255correspond au blanc.
La valeur 0.15 indique 15% d’opacité seulement. Le bouton devient semi transparent, comme une plaque de verre.
Le flou derrière le bouton
Maintenant, la propriété magique :
backdrop-filter:blur(10px);Cette propriété applique un flou à l’arrière du bouton.
Attention : elle ne floute pas le bouton lui-même.
Elle floute ce qui se trouve derrière lui. C’est exactement ce qui donne l’effet glass iOS.
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 ?Apple utilise énormément ce principe dans ses interfaces. Pour la compatibilité Safari, on ajoute aussi :
-webkit-backdrop-filter:blur(10px);Oui, les navigateurs aiment parfois faire leurs divas.
La bordure lumineuse
Regardons maintenant cette ligne :
border:1px solid rgba(255,255,255,0.3);Cette bordure très légère simule la réflexion de la lumière sur le verre. Sans elle, le bouton paraîtrait plat.
Avec elle, le bouton semble physiquement présent dans l’interface. Un petit détail… qui change tout.
Ajouter une ombre réaliste
Voici l’ombre :
box-shadow:0 8px 32px rgba(0,0,0,0.2);Décodons.
0 = décalage horizontal
8px = décalage vertical
32px = flouCette ombre donne l’impression que le bouton flotte légèrement au-dessus de la page.
Encore une fois : c’est subtil, mais c’est essentiel.
Animation au survol (effet liquide)
Un bouton moderne doit réagir au passage de la souris.
Ajoutons un effet :
.liquid-button:hover{
background:rgba(255,255,255,0.25);
transform:translateY(-3px);
box-shadow:
0 12px 40px rgba(0,0,0,0.25);
}Voyons cela.
Changement de transparence
Lorsque la souris passe sur le bouton :
background:rgba(255,255,255,0.25);Le bouton devient un peu plus opaque.
Cela donne l’impression qu’il réagit comme une surface liquide.
Léger mouvement
transform:translateY(-3px);Le bouton remonte de 3 pixels.
C’est très léger… mais le cerveau humain adore ce type de micro-interaction. Le bouton semble répondre au mouvement de la souris.
Ajouter un effet de reflet lumineux
Pour rendre notre bouton liquid glass CSS encore plus réaliste, nous allons ajouter un reflet animé.
Ajoutez ce code :
.liquid-button::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transition:0.6s;
}Puis :
.liquid-button{
position:relative;
overflow:hidden;
}Et enfin :
.liquid-button:hover::before{
left:100%;
}Que se passe-t-il ici ?
Un reflet lumineux traverse le bouton, comme si une lumière passait dessus.
C’est exactement l’effet utilisé dans beaucoup d’interfaces modernes.
Code complet du bouton liquid glass CSS
Voici maintenant le code final.
HTML
<div class="container">
<button class="liquid-button">
Télécharger
</button>
</div>CSS
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #4facfe, #00f2fe);
font-family: Arial;
}
.liquid-button {
position: relative;
overflow: hidden;
padding: 16px 40px;
font-size: 18px;
color: white;
border: none;
border-radius: 40px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.liquid-button:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.liquid-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
transition: 0.6s;
}
.liquid-button:hover::before {
left: 100%;
}Personnaliser votre bouton
Une fois ce bouton liquid glass CSS créé, vous pouvez facilement le modifier.
Par exemple, vous pouvez changer la couleur du verre :
rgba(255,255,255,0.2)ou
rgba(0,0,0,0.2)Modifier le flou :
blur(20px)Augmenter l’ombre pour un effet plus spectaculaire.
Les possibilités sont presque infinies.
Créer un bouton liquide glass CSS peut sembler impressionnant au premier abord. Pourtant, comme vous venez de le découvrir, tout repose sur quelques propriétés bien choisies : transparence, flou, ombre et animation.
Ce qui est fascinant avec le CSS moderne, c’est qu’il permet aujourd’hui de reproduire des effets autrefois réservés aux logiciels de design. Avec quelques lignes de code seulement, vous pouvez transformer un simple bouton en élément d’interface élégant et vivant, digne d’une application iOS.
Le plus amusant reste l’expérimentation. Essayez différents flous, jouez avec les couleurs, testez d’autres animations. C’est souvent en bricolant un peu que l’on découvre les effets visuels les plus surprenants… et parfois les plus beaux.
Et qui sait ? Votre prochain bouton pourrait bien devenir le détail qui donne du style à toute votre interface.
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi