Os botões CSS são a primeira coisa com que os visitantes interagem num site. Um bom botão atrai o olhar, incentiva a ação e funciona sem JavaScript em dispositivos móveis. Um mau botão confunde-se com o fundo e não dá qualquer feedback quando pressionado. No entanto, a maioria dos botões parece igual: um retângulo plano, uma mudança de cor ao passar o rato e pouco mais. Mas um botão pode ser um elemento de design por direito próprio, com animação, um efeito 3D, preenchimento em gradiente ou um ícone que desliza ao passar o rato.

Um dos conjuntos mais conhecidos de botões criativos é o CreativeButtons do estúdio Codrops. É uma coleção de oito categorias de estilos, que vão desde bordas minimalistas a transformações 3D volumétricas. O código-fonte é aberto, o código é limpo e a página de demonstração ainda funciona 13 anos após a publicação. Neste artigo, vamos ver que estilos estão incluídos no conjunto, como adicioná-los a qualquer site e como integrá-los com o WordPress através do functions.php.

💡 Visão geral rápida:

• Descarregue o arquivo do repositório GitHub do Codrops, que contém todos os ficheiros CSS e a marcação de demonstração
• Inclua o component.css e o default.css no seu projeto, copie a marcação HTML do estilo de botão de que precisa
• Para o WordPress, adicione wp_enqueue_style no functions.php do seu tema, especificando o caminho para os ficheiros na pasta do tema
• Personalize cores e tamanhos para combinar com o seu design: substitua as propriedades CSS numa folha de estilos filha
• Veja o tutorial de efeitos de botões CSS abaixo para ver as animações em ação

O que é o CreativeButtons

O Codrops publicou o CreativeButtons em junho de 2013 como uma demonstração das capacidades expressivas do CSS3. O conjunto inclui oito categorias de estilos, cada uma resolvendo a sua própria tarefa visual:

Cada botão é puro HTML e CSS. Alguns estilos (como o btn-4 com um ícone) usam JavaScript para alternar classes ao clicar, mas a magia principal reside em transition, transform e nos pseudo-elementos ::before e ::after.

Os ícones no conjunto vêm da biblioteca IcoMoon. São inseridos através do pseudo-elemento ::before com um caractere de uma fonte de ícones, eliminando a necessidade de carregar ficheiros SVG separados.

Marcação HTML: uma estrutura universal

A marcação do botão é intencionalmente simples. O programador adiciona uma classe comum e duas numeradas a um elemento <button>:

1
<button class="btn btn-6 btn-6d">Button</button>

A classe btn repõe os estilos do navegador (borda, contorno, fundo). A classe btn-6 contém propriedades comuns para a categoria (borda tracejada, arredondamento). A classe btn-6d é o estilo individual para um botão específico dentro da categoria. Esta estrutura de três níveis permite combinar dezenas de variações com uma duplicação mínima de código.

Se o botão contiver um ícone, é adicionada outra classe, por exemplo, btn-4a icon-arrow-right. O ícone é renderizado via ::before com um caractere de conteúdo da fonte IcoMoon:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Uma nota importante: na versão de demonstração, as classes são separadas apenas para fins de demonstração. Num projeto de produção, as propriedades de um estilo devem ser combinadas numa única classe, reduzindo o peso do seletor e simplificando as substituições.

Estilos CSS: da reposição à animação

A classe base .btn faz o mínimo: remove o fundo, a borda e o preenchimento do navegador, define cursor: pointer e position: relative (para posicionar pseudo-elementos). Toda a expressividade vem das classes de categoria e individuais.

Aqui está um exemplo de estilos para o botão btn-6d (borda tracejada com preenchimento ao passar o rato):

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Não há magia aqui, apenas transition e a alteração dos valores de background e color ao passar o rato. Este mesmo princípio é a base de todas as oito categorias. A diferença está nos detalhes: algumas adicionam transform: scale(), outras usam box-shadow para profundidade, e outras animam via @keyframes para um ciclo de pulsação infinito.

Integração com o WordPress

Para que os botões funcionem num tema WordPress, precisa de enviar os ficheiros CSS para a pasta do tema e incluí-los via wp_enqueue_style. Crie uma subpasta (por exemplo, JS_CSS_Plugins/CreativeButtons/css/) no diretório do seu tema ativo e copie o component.css e o default.css para lá.

Depois adicione isto ao functions.php:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

As duas funções separadas no exemplo original foram substituídas por uma, tornando-a mais limpa e fácil de manter. A ordem de inclusão é importante: primeiro o component.css (estilos principais da categoria), depois o default.css (estilos individuais dos botões). Se houver um conflito com o seu tema, substitua as propriedades necessárias numa folha de estilos filha com maior prioridade.

Alternativas modernas: o que mudou em 13 anos

O CreativeButtons é um conjunto testado pelo tempo, mas o CSS percorreu um longo caminho desde 2013. Se está a iniciar um novo projeto em 2026, considere ferramentas mais modernas:

• Variáveis CSS. Em vez de #226fbe fixo, use var(--btn-primary). Isto simplifica as mudanças de esquema de cores e o suporte a temas escuros.
• Propriedades lógicas. padding-inline e margin-block em vez de padding-left/right e margin-top/bottom, para que o botão seja exibido corretamente em idiomas RTL sem código adicional.
• prefers-reduced-motion. Envolva as animações numa media query e desative-as para utilizadores com sensibilidade ao movimento.
• Coleções prontas a usar. O Free Frontend mantém uma coleção de mais de 220 botões CSS com demonstrações no CodePen, e o Uiverse oferece mais de 1900 opções com compatibilidade com Tailwind.

Mas se precisa de um conjunto minimalista e compreensível que não dependa de frameworks, o CreativeButtons continua a ser uma excelente escolha. O código pode ser lido em meia hora, modificado para qualquer design e não tem dependências.

Veja este pequeno tutorial sobre efeitos de hover em CSS, desde transições básicas a animações complexas em CSS puro:

O vídeo mostra claramente como as animações de transition, transform e keyframes funcionam nos botões. Depois de o ver, será capaz não só de replicar os estilos do CreativeButtons, mas também de escrever os seus próprios efeitos de raiz.

⁉️🤔 Perguntas frequentes

Posso usar o CreativeButtons em projetos comerciais?

Sim, o código-fonte é distribuído livremente. O repositório do GitHub não contém uma licença explícita, mas o Codrops publica recursos de demonstração como estando disponíveis publicamente para aprendizagem e uso. Para total certeza, adicione um link para a fonte nos comentários do seu CSS.

Preciso de incluir ambos os ficheiros CSS?

Não. Se só precisa de um estilo de botão, copie as regras CSS correspondentes para a folha de estilos principal do seu tema. O component.css e o default.css estão separados para facilitar a navegação na demonstração, não por necessidade técnica.

Como mudo a cor do botão para combinar com a minha marca?

Encontre o seletor do estilo de que precisa no default.css (por exemplo, .btn-6d) e substitua os valores de color e border-color. Para estilos com gradiente (btn-8), substitua as cores em background-image: linear-gradient(). Substitua num tema filho ou no personalizador do WordPress (a secção "CSS adicional").

Os botões funcionam em dispositivos móveis?

Sim, todos os efeitos são construídos com base em :hover e transition, que são tratados corretamente pelos navegadores móveis. Tenha em mente que os ecrãs táteis não têm um estado de hover propriamente dito: o navegador aplica os estilos de hover no primeiro toque, e a ação é acionada no segundo. Para botões CTA críticos, use estilos que tenham bom aspeto mesmo sem o efeito de hover.

Vale a pena usar o CreativeButtons em 2026

O CreativeButtons é um caso raro em que o código de 2013 permanece funcional e útil. As especificações CSS em que se baseia (transition, transform e pseudo-elementos) tornaram-se há muito um padrão e são suportadas por todos os navegadores.

Use este conjunto se precisar de: prototipagem rápida sem frameworks, uma base de código clara para ensinar programadores juniores, ou estilos prontos para um projeto pessoal que não exija um sistema de design de nível empresarial. Para um grande projeto comercial, faz mais sentido escolher uma coleção moderna com variáveis CSS e suporte de acessibilidade integrado.

Descarregue o CreativeButtons do GitHub e experimente qualquer uma das oito categorias no seu projeto, do protótipo à produção.