Skip to main content
Penguin ToolsOutils Pingouin

Générateur d'interrupteur à bascule CSS

Créez des interrupteurs à bascule CSS personnalisés avec un éditeur visuel. Ajustez la taille, la couleur et l'animation, puis exportez le code.

#6366f1
#d1d5db
#ffffff

Aperçu

Wi-Fi
Bluetooth

Code HTML

<label class="toggle-switch">
    <input type="checkbox" />
    <span class="slider"></span>
</label>

Code CSS

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

.toggle-switch .slider::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 45px;
    transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .slider {
    background-color: #6366f1;
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(24px);
}
Partager cet outil
📖

Comment utiliser

Step 1

Sélectionner le design

Sélectionner le design

Sélectionnez un modèle de design d'interrupteur à bascule

Step 2

Personnaliser

Personnaliser

Ajustez les couleurs, la taille, l'arrondi, l'animation, etc.

Step 3

Copier le code

Copier le code

Copiez le code HTML/CSS

✨

Fonctionnalités

Aperçu en temps réel

Prévisualisez le comportement de l'interrupteur à bascule en temps réel

Styles variés

Variations de design : style iOS, style Material, plat, et plus encore

Animation fluide

Animations de bascule fluides grâce aux transitions CSS

❓

FAQ

Un composant d'interface qui transforme une case à cocher en interrupteur. Utilisé pour basculer ON/OFF.

🔗Outils associés

🎨
Outils de design

Convertisseur de codes couleur

Convertissez entre les codes couleur HEX, RGB et HSL. Utilisez le sélecteur de couleur et l'aperçu en temps réel pour une sélection intuitive.

🎨
Outils de design

Sélecteur de couleur

Choisissez des couleurs intuitivement avec un cercle chromatique et des curseurs. Obtenez et copiez les codes couleur aux formats HEX, RGB et HSL.

🎨
Outils de design

Extracteur de couleurs d'image

Détectez automatiquement les couleurs dominantes d'une image et générez une palette de couleurs. Vous pouvez aussi cliquer n'importe où sur l'image pour sélectionner des couleurs individuelles.

🎯
Outils de design

Sélecteur de couleur moyenne d'image

Calculez la couleur moyenne d'une image entière ou d'une zone sélectionnée. Utile pour choisir des palettes de couleurs ou des couleurs d'arrière-plan de vignettes.

🌈
Outils de design

Générateur de dégradés CSS

Créez visuellement des dégradés CSS avec des contrôles par glissement. Prise en charge des dégradés linéaires, radiaux et coniques avec préréglages.

🔲
Outils de design

Générateur CSS Box Shadow

Créez visuellement des box-shadow CSS avec des curseurs. Prise en charge des ombres multiples et des ombres intérieures.