Cartões de Preços Pesponsivos com Efeito Wsando HTML e CSS

Robson dos Santos 23/02/2026 0 Comentários Leitura: 3 min

cartao precos hover - Cartões de Preços Pesponsivos com Efeito Wsando HTML e CSS

Criar seções de preços visualmente atraentes é essencial para sites modernos, especialmente aqueles que oferecem produtos digitais ou serviços de assinatura. Neste tutorial, vamos explorar como criar um layout de cartão de preços bonito e interativo usando apenas HTML e CSS, sem necessidade de JavaScript.

Estrutura HTML:

O HTML configura uma seção contendo três cartões de preços: Básico , Pro e Premium . Cada cartão está dentro de um elemento <div>com a classe pricing-card`premium` e contém o nome do plano, o preço, uma lista de recursos e um botão de chamada para ação. O cartão “Pro” se destaca com uma featuredclasse adicional, dando um estilo especial.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pricing Cards With Hover Effect</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="pricing-section">
      <div class="pricing-card">
        <h3>Basic</h3>
        <h2>$9<span>/mo</span></h2>
        <ul>
          <li>1 Website</li>
          <li>10GB Storage</li>
          <li>Email Support</li>
        </ul>
        <button>Choose Plan</button>
      </div>
      <div class="pricing-card featured">
        <h3>Pro</h3>
        <h2>$29<span>/mo</span></h2>
        <ul>
          <li>5 Websites</li>
          <li>50GB Storage</li>
          <li>Priority Support</li>
        </ul>
        <button>Choose Plan</button>
      </div>
      <div class="pricing-card">
        <h3>Premium</h3>
        <h2>$49<span>/mo</span></h2>
        <ul>
          <li>Unlimited Websites</li>
          <li>200GB Storage</li>
          <li>24/7 Support</li>
        </ul>
        <button>Choose Plan</button>
      </div>
    </section>
  </body>
</html>

Estilização CSS:

O CSS dá vida aos cards com um design moderno e limpo. Os cards são estilizados com cantos arredondados, sombras e conteúdo centralizado para manter tudo organizado e legível. O .pricing-sectionCSS flexbox alinha os cards em uma linha com espaçamento e os ajusta em telas menores.

Cada cartão apresenta uma animação suave ao passar o cursor, transform: scale(1.05)que amplia ligeiramente o cartão para criar uma sensação interativa e responsiva. A cor de fundo também muda ao passar o cursor para melhorar o feedback visual.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  background: #f2f2f2;
  padding: 50px;
  display: flex;
  justify-content: center;
}
.pricing-section {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.pricing-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 15px;
  width: 280px;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.pricing-card:hover {
  transform: scale(1.05);
  background: #f0f8ff;
}
.pricing-card h3 {
  font-weight: 600;
  font-size: 1.4rem;
  color: #333333;
  margin-bottom: 10px;
}
.pricing-card h2 {
  font-size: 2rem;
  color: #0077ff;
  margin-bottom: 20px;
}
.pricing-card h2 span {
  font-size: 0.9rem;
  color: #666666;
}
.pricing-card ul {
  list-style: none;
  margin-bottom: 20px;
}
.pricing-card ul li {
  margin: 10px 0;
  color: #444444;
}
.pricing-card button {
  background-color: #0077ff;
  color: #ffffff;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.3 ease;
}
.pricing-card button:hover {
  background: #005ecb;
}
.featured {
  border: 2px solid #0077ff;
}

Se o seu projeto apresentar problemas, não se preocupe. Basta clicar para baixar o código-fonte e encarar seus desafios de programação com entusiasmo. Divirta-se programando!

Baixar Código Fonte

banner fullstack pro - Cartões de Preços Pesponsivos com Efeito Wsando HTML e CSS

Acesse nossa categoria de projetos.

Acessar os Projetos práticos

Estrutura HTML:

Estilização CSS:

Deixe um comentário Cancelar resposta