CSS3 Flip Switch Generator Online - Crie interruptores bonitos e interativos para o seu site

Flip Switch Preview
Active Properties
Background Color

Text Color

Text
Inactive Properties
Background Color

Text Color

Text
Label Properties
Font Size: 18px
Text Padding: 12px
Switch Properties
Background Color

Border Color

Border Width: 2px
Switch Size: 38px
Switch Size
Width: 132px
Height: 24px
Border Radius: 8px
HTML Code
<div class="flipswitch">
    <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
    <label class="flipswitch-label" for="fs">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>
CSS Code
.flipswitch {
  position: relative;
  width: 132px;
}
.flipswitch input[type=checkbox] {
  display: none;
}
.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 8px;
}
.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 18px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
.flipswitch-inner:before {
  content: "ON";
  padding-left: 12px;
  background-color: #256799;
  color: #FFFFFF;
}
.flipswitch-inner:after {
  content: "OFF";
  padding-right: 12px;
  background-color: #EBEBEB;
  color: #888888;
  text-align: right;
}
.flipswitch-switch {
  width: 38px;
  margin: -7px;
  background: #FFFFFF;
  border: 2px solid #999999;
  border-radius: 8px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 106px;
  transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

Introdução ao CSS Flip Switch Generator: aprimorando a interatividade em seu site

Ao construir um site, ter elementos interativos visualmente atraentes e fáceis de usar pode melhorar muito a experiência do usuário. CSS Flip Switch Generator é uma ferramenta valiosa que permite criar interruptores bonitos e interativos em seu site usando CSS. Neste artigo, exploraremos o CSS Flip Switch Generator e como usá-lo para criar interruptores diferentes em seu site.

O que é CSS Flip Switch?

Antes de nos aprofundarmos nos detalhes desta ferramenta, vamos entender o conceito de CSS Flip Switch. CSS Flip Switch é um interruptor de alternância interativo que pode ser alternado entre dois estados, geralmente "ligado" e "desligado". É um elemento de interface do usuário interessante e útil que permite aos usuários alterar opções ou estados em um site.

Apresentando o CSS Flip Switch Generator

CSS Flip Switch Generator é uma ferramenta online gratuita que ajuda você a gerar código CSS para criar interruptores com facilidade. Ao usar esta ferramenta, você pode personalizar elementos como cores, tamanhos, efeitos de animação e muito mais para criar interruptores exclusivos que se adequam ao seu site.

Como usar o gerador CSS Flip Switch

Usar o CSS Flip Switch Generator é um processo direto:

Passo 1: Visite o siteCSS Flip Switch Generator.

Etapa 2: personalize elementos como cores, tamanhos e efeitos de animação de acordo com suas influências.

Etapa 3: À medida que você faz alterações, a ferramenta será atualizada automaticamente e exibirá o botão de alternância correspondente. Você pode visualizá-lo em tempo real e fazer ajustes até atingir o resultado desejado.

Etapa 4: Assim que terminar, a ferramenta fornecerá o código CSS correspondente para o botão de alternância. Basta copiar e usar este código em seu site.

Aplicações do CSS Flip Switch Generator

CSS Flip Switch Generator permite que você crie interruptores de alternância exclusivos e interativos para o seu site. Aqui estão algumas ideias sobre como você pode aplicar esta ferramenta:

  • Adicione chaves de alternância para permitir que os usuários alterem estados ou opções em seu site.
  • Crie interruptores de alternância visualmente atraentes para recursos como modo escuro, notificações ou modos de exibição.


CSS Flip Switch Generator é uma ferramenta valiosa que ajuda você a criar interruptores bonitos e interativos para o seu site. Com suas opções de flexibilidade e personalização, você pode criar interruptores exclusivos que aprimoram a experiência do usuário em seu site. Experimente o CSS Flip Switch Generator e crie interruptores de alternância impressionantes para o seu site.