🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Modelo CSS: Botão arredondado (border-radius + background)

📝 Uso previsto

Este modelo é útil quando você deseja oferecer um botão visualmente atraente para ações do usuário. É simples o suficiente para iniciantes usarem.

📘 Explicação

Este trecho de CSS usa border-radius para arredondar os cantos e background-color para adicionar cor. Pode ser usado para botões de envio, links e muito mais.

🔹 Código parcial

<button class="rounded-button">Clique aqui</button>

<style>
  .rounded-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
  }
</style>

🔸 Código HTML completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Botão arredondado</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .rounded-button {
      background-color: #28a745;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="rounded-button">Clique aqui</button>
</body>
</html>
Copiado!

🎯 Técnicas avançadas de design para botões arredondados

Botões arredondados são um elemento fundamental do design moderno de interface. Esta técnica simples usando border-radius melhora significativamente a usabilidade da interface do usuário.

🌈 Dicas de personalização

Ajustar o valor de border-radius pode mudar drasticamente a impressão de um botão. Valores pequenos em torno de 5px são adequados para designs mais corporativos, enquanto valores maiores como 25px proporcionam uma sensação mais amigável. Para criar um botão totalmente circular, especifique 50%. As cores de fundo podem ser alteradas conforme o uso, como #28a745 (verde), #007bff (azul) ou #dc3545 (vermelho).

✨ Adicionando interação

Adicionar estilos :hover e :active a botões básicos torna a interface mais interativa. Por exemplo, .rounded-button:hover { background-color: #218838; transform: scale(1.05); } faz com que o botão fique mais escuro e levemente ampliado ao passar o mouse. Adicionar a propriedade transition suaviza essas mudanças.

📱 Dicas para design responsivo

Em dispositivos móveis, aumentar o padding do botão (por exemplo, 15px 30px) facilita o toque. Usar media queries como @media (max-width: 768px) { .rounded-button { padding: 15px 30px; } } é recomendado para ajustes. O tamanho da fonte também pode ser ajustado conforme a largura da tela.

Botões arredondados são elementos simples mas eficazes, mas seu uso excessivo em uma única página pode diminuir sua visibilidade. É melhor limitar seu uso a botões de ação principais ou elementos realmente importantes.

Modelos Relacionados