Crie botões de rádio animados divertidos com o Radiobox.css

o botões de opção HTML5 padrão são muito chatos. Existem maneiras de personalize-os usando CSS3, mas a maioria das técnicas focar apenas nos looks.

Radiobox.css foca em parece e estilo adicionando animações CSS3 personalizadas a entradas de rádio.

Esta biblioteca é totalmente livre e Código aberto, disponível no GitHub para download. Com esta biblioteca CSS, você pode escolher entre mais de 12 animações diferentes que se aplicam a botões de rádio.

Sem estilos CSS personalizados, eles ainda parecido com entradas de rádio normais. Mas quando o usuário clica para selecionar um botão, ele obter um efeito de animação maluco. Você pode ver exemplos vivos na página principal do Radiobox, que demonstra cada estilo ao lado de seu nome.

Você pode instalar o Radiobox direto de npm ou bower, ou até mesmo baixar os arquivos localmente para sua máquina. GitHub hospeda todos os seus arquivos em um CDN se você quiser brincar sem baixar nada.

O único arquivo que você precisa é radiobox.min.css que deveria ir diretamente na cabeça do seu documento. De lá, você só adicione uma classe simples para cada botão de rádio, dependendo da animação que você deseja.

Aqui está um fragmento de código para o “Boing” efeito:

Note o “Boing” animação tem seu próprio arquivo CSS chamado boing.min.css. este tem que ser incluído se você planeja usar esse efeito na página.

Quando você baixar o Radiobox você deve obter um diretório de demonstração com demonstrações ao vivo para todos esses efeitos. Você pode simplesmente copiar / colar o código diretamente para a sua página para fazê-lo funcionar sem problemas.

Para documentação completa, Confira a repo principal juntamente com o site de demonstração ao vivo. Se você quiser entrar em contato com os criadores, envie um e-mail do Site 720kb ou mensagem via Twitter @ 720kb_.