10 snippets CSS gratuitos para criar tabelas de preços responsivas

A página de preços é um grampo para qualquer loja online. É usado para produtos SaaS, empresas de serviços e lojas de comércio eletrônico em toda a web.

E nenhuma página de preços estaria completa sem uma tabela de preços comparando opções, recursos e (naturalmente) preços. Mas projetar o seu próprio a partir do zero pode ser um aborrecimento.

É aí que essas tabelas de preços de código aberto podem ajudar. Todos eles são totalmente responsivos e funcionam muito bem como modelos, quer você queira personalizar seu próprio código ou apenas reutilizar o código existente para economizar tempo.

1. Tabela de ícones por Travis Williamson

Ótimos visuais sempre vendem. Podem ser fotos de produtos ou ilustrações personalizadas, mas os recursos visuais chamam a atenção mais rapidamente do que o texto.

Esta tabela de preços icônica é um excelente exemplo do que é possível com as colunas da tabela visual. Ao adicionar ícones, você pode informar aos clientes o que eles estão recebendo com cada pacote antes mesmo de lerem qualquer coisa. Os ícones mostram poder e recursos variados. O menor plano tem um avião de papel, enquanto o maior plano usa um foguete completo. Fale sobre contraste!

Veja a caneta
Tabela de preços de Travis Williamson (@travisw)

2. Zebra Striping com Cores por Agustin Ortiz

Este exemplo tem uma tabela de preços muito mais simples e segue regras de design mais convencionais. Ele usa listras de zebra, cabeçalhos de preços grandes e várias cores para ajudar um formato de preço específico a se destacar dos demais.

As cores podem parecer um pouco fortes, por isso não é perfeita para todos os layouts. Mas você pode alterar facilmente as cores e ainda manter o mesmo formato para que essa tabela de preços funcione em seu próprio site.

Veja a Tabela de Preços das Canetas | Tabla de Precios de Agustin Ortiz

3. Mesa Roxa Escura de Mike Torosian

Para um design de mesa mais escuro e rico, confira esta tabela de preços roxa. Ele usa gradientes de fundo e efeitos de foco de borda para criar uma das tabelas de preços mais profissionais da web. Também é totalmente responsivo, de modo que os elementos da tabela se dividem em linhas à medida que o navegador fica menor.

Veja a tabela de preços de canetas por Mike Torosian

4. Preços profissionais da LittleSnippets

Os sites B2B geralmente procuram designs mais profissionais que se afastam de esquemas de cores criativos e ícones estranhos. Este design de preços é um exemplo seguindo um esquema de cores típico de tons escuros e claros.

Uma coluna de preços usa um destaque em azul escuro para se destacar do restante da tabela. É uma prática padrão seguir essa técnica, pois pode levar a uma taxa de conversão mais alta. É por isso que o plano “profissional” também usa uma sombra projetada para aparecer em cima das outras colunas. Mas quando redimensionado para baixo, ele cai em uma formação de pilha para facilitar a navegação.

Veja a caneta nº 1214 – Tabela de preços da LittleSnippets

5. Tabela com efeitos flutuantes por Nidheesh Balachandran

Neste design de tabela de preços, você encontrará alguns lindos efeitos de foco que adicionam cor aos cabeçalhos de tabela escurecidos. Cada um deles deixa espaço para uma imagem de fundo de sua escolha, e o efeito de foco é gerenciado via CSS.

Uma outra coisa que eu gosto é o evento de clique vinculado a toda a coluna da tabela. Dessa forma, se um visitante clicar em qualquer lugar da coluna, ele o levará diretamente à página de inscrição relevante.

Veja a tabela de preços da caneta por Nidheesh Balachandran

6. Tabelas de Preços Bootstrap por Sahar Ali Raza

Sou um grande fã do Bootstrap, pois há muito o que fazer com o framework e seus temas relacionados. Um exemplo é este exemplo de tabela de preços.

Muito desse design é codificado de forma personalizada, incluindo os fundos de cabeçalho inclinados e as animações de foco. Mas o layout geral depende do Bootstrap, o que o torna totalmente responsivo por padrão. A tipografia é impressionante, e eu também adoro as animações ao passar por cima de cada linha. Este é um design de tabela limpo que pode funcionar para quase qualquer tipo de site.

Veja a tabela de preços da caneta Bootstrap por Sahar Ali Raza

7. Tabela de Preços do Material Design por Morten Srensen

Se você gosta do design de materiais do Google, com certeza vai gostar desta tabela de preços. É uma tabela de UI de material seguindo muitos dos recursos sugeridos pelo Google, como sombras suspensas e esquemas de cores planas.

Veja a caneta
Tabelas de preços de design de materiais (flexbox) por Morten Srensen.

8. Tabela de Preços Limpa e Simples de Daniel Hearn

Super limpo e leve descreve melhor esta tabela de preços branca. Ele não depende de muitas cores ou recursos sofisticados para se destacar. Em vez disso, ele usa cinza para os cabeçalhos e preto/branco para o contraste do texto. Isso realmente funciona bem, pois os botões CTA mantêm um forte efeito de contorno verde.

Ao reduzir a cor em uma tabela, você chama a atenção para as únicas áreas com cor e isso geralmente incentiva mais cliques. Como isso é CSS puro, você terá facilidade para atualizar a cor do botão para se adequar ao seu design.

Veja a Tabela de Preços das Canetas -1 por Daniel Hearn

9. Tabelas WIP por Dylan Mcleod

Para um trabalho em andamento, devo dizer que este conjunto colorido de tabelas de preços parece incrível. Ele segue muitas técnicas tradicionais, como destacar os cabeçalhos das tabelas e manter uma coluna maior que as outras.

Mas estou mais impressionado com as opções de cores variadas que se misturam tão bem. É quase como se essas tabelas tivessem alguns cabeçalhos diferentes, e todos eles chamam sua atenção por vários motivos.

Veja as tabelas de preços de canetas de Dylan Mcleod

10. Conto de preços do Flexbox por CSSGirl

Agora, para um design de mesa realmente voltado para a frente, confira esta mesa flexbox. Ao passar o mouse sobre a mesa, cada coluna fica um pouco maior e aumenta a cor de fundo. Isso ajuda a coluna a se destacar do resto e chamar a atenção mais rapidamente. É um bom efeito que é transferido para as transições CSS da tabela enquanto redimensiona o navegador.

Embora o maior recurso aqui seja o uso do flexbox para formatar as colunas da tabela. Este exemplo prova que o flexbox é o futuro dos sites responsivos.

Veja o plano de preços da caneta Flexbox por Lindsey