Tendo em vista lançar uma nova proposta no blog, que beneficia os usuários mais avançados, resolvi inaugurar essa nova categoria apresentando 49 botões CSS que podem ser baixados gratuitamente e editados livremente por qualquer pessoa.
Porém, essa proposta não está voltada unicamente para usuários mais experientes e com conhecimentos em Web design, mas sim também para aqueles que nunca lhe deram com códigos HTML e CSS. Foi pensando neles que modifiquei todos os códigos, para que ficassem mais fáceis de serem usados e editados.
Sei que para os usuários que tem conhecimento nessa área, bastava colocar o link original dos arquivos CSS e estes saberiam o que fazer para implementarem os botões em seus projetos. No entanto, foi pensando no usuário leigo que fiz toda a alteração mais didática nos códigos, para que esses também possam adicionar estes recursos CSS em seus trabalhos, caso seja de interesse dos mesmos.
O que é CSS?
Explicando rapidamente, CSS é uma linguagem de programação que tem como função aplicar estilos na estrutura de um documento HTML. Ele é responsável pela formatação de fontes, cores, bordas, linhas, altura e largura, imagens, posicionamentos e vários outros elementos.
A grosso modo, é a maquiagem de uma página, em que os “batons, lápis e delineadores“, seriam as variações de um estilo CSS.
Como baixar os botões
Caso você seja um usuário avançado, acesse aqui o site onde está o código original, sem alteração, que pode ser usado não somente em sites Wix, mas em qualquer outra plataforma de sites e blogs.
Para visualizar e baixar os botões com o código modificado por mim, clique para acessar uma página Wix onde os códigos podem ser visualizados e baixados diretamente pelo Codpen. Pode haver um pequeno travamento na abertura da página, mas não se trata de algum problema no código em si, e sim porque há muitos códigos juntos em uma mesma página.
Na página de visualização, há uma parte chamada “Exemplo de aplicação“, em que sua função é proporcionar uma experiência de aplicação prática dos botões CSS em um site Wix. Perceba que as cores estão combinando com o layout do site e os links dos botões redirecionam para páginas dentro do site.
Na seção “Coleção completa” inicia-se apresentação de cada botão e seus efeitos, bastando clicar no botão “Baixar este estilo“, para ir ao Codpen e ter acesso aos códigos.
Passo a passo de como editar e adicionar os botões
Agora que você já visualizou os efeitos e funcionamento dos botões, vejamos como fazer para, em fim, inseri-los em suas páginas.
Para ajudar no entendimento, fiz uma videoaula mostrando todo o procedimento:
<<<ASSISTA AQUI>>>
Siga os passos:
1. Caso ainda não tenha feito, visualize AQUI os botões e seus efeitos, passe o mouse por cima para conferir os recursos, tanto na página 1 quanto na página 2.
2. Escolhido um efeito, clique no botão “Baixar este estilo“, ao lado de cada elemento.
3. Uma página do site Codpen será aberto juntamente com o código daquele botão. No campo HTML, está todo o código do botão e logo abaixo é possível visualizar as alterações em tempo real.
Personalizando um botão
Agora chegou a hora de botar a mão na massa e editar o código conforme as necessidades do seu site.
Mudando o texto do botão
4. Para mudar o texto original do botão para um conteúdo que você queira, basta ir até o final do código e SUBSTITUIR os textos onde está escrito “Serviço 1“, “Serviço 2” ou “Serviço 3” e inserir seu texto personalizado.
Inserindo um LINK personalizado
5. Agora uma parte delicada desse processo. Você precisa copiar o código da página a qual deseja que o botão direcione quando for clicado.
Por exemplo: se o nome do botão for Serviço X e você quer que ele abra a página Serviço X quando alguém clicar sobre ele, você terá que inserir a URL completa da página Serviço X.
Como pegar a URL completa de uma página?
Basta abrir a página normalmente e copiar a URL da mesma.
Colando a URL dentro do código do botão
6. A segunda etapa será COLAR essa URL copiada na opção <a href=”#”.. do código do botão. Você precisa substituir o símbolo “#” pela URL da sua página.
Obs 1: O símbolo # deve ser substituído pela URL da página e não permanecer junto com ela.
Obs 2: Adicione links para cada botão separadamente.
Como adicionar mais botões
7. Por padrão, vão 3 botões sequenciais no código, porém, você pode adicionar mais botões, bastando para isso selecionar a sessão que se inicia em <a e vai até </a>, copiar e em seguida, colar no final do código do botão.
Excluindo botões
8. Caso o que você queira seja diminuir a quantidade de botões, basta fazer o mesmo processo acima e, ao invés de copiar e colar o código, EXCLUIR o código selecionado.
Estilizando um botão: mudando a cor de fundo
9. Para alterar a cor de fundo de um botão, você precisa do código HTML da cor desejada. É possível fazer isso de 2 formas.
- Acesse este ou este site e copie um código de cor HTML, qualquer uma que comece com “#”, do tipo #e0e0e0 ou #ff00ff, etc.
- Capturar uma cor HTML de qualquer lugar através de programa Colour To HTML.
10. Com seu código de cor HTML copiado, localize a função “background“, apague o código atual ($e1e1e1) e COLE o novo código.
Atenção: o ponto-e-vírgula (;) no final do código precisa continuar, para não dar erro.
Mudar a cor da letra
11. Para deixar a fonte (letra) com a cor que você quiser, basta seguir o mesmo procedimento acima, porém, alterando a função “Color” do código.
Mudar o tipo de fonte
12. Caso você queira personalizar a fonte do botão, basta localizar a função “font-family” e inserir seu tipo de fonte desejado, como Arial, Times New Roman, Tahoma, etc.
Aumentando o espaço entre os botões
13. Outra configuração que pode ser facilmente implementada nos códigos é o espaçamento horizontal entre um botão e outro.
Como em HTML não é possível aumentar os espaços horizontais apenas dando enter ou apertando a tecla espaço no teclado, é necessário usar o código html , que pode ser colado nos espaços entre os botões, dentro do código.
Para aumentar esse espaçamento ainda mais, basta colar o mesmo código várias vezes.
Copiando todo o código editado
14. Quando finalizar todas as edições e ver que os botões estão do jeito que você queria, basta copiar TODO o código do campo HTML do Codpen.
15. Agora basta COLAR dentro da página do seu site, através de um APP HTML. É importante dimensionar o app para não aparecer barras laterais ou horizontais.
Conclusão
Os usuários Wix tem pouco interesse em mexer com códigos, para muitos dá dor de cabeça só de olhar os códigos. Contudo, os códigos acima foram modificados e estão bastante didáticos, somando este tutorial e a breve videoaula, fica ainda mais fácil implementar um novo recurso no seu site através do uso desses códigos.
Logicamente que também depende do tipo de site que você esteja construindo e do seu nicho de atuação, mas esses botões servem para dar um toque a mais no design do seu site como um todo.
É isso. Havendo dúvidas, fique a vontade para comentar.