MENU DE NAVEGAÇÃO, CARD E BOTÃO COM HTML E CSS

Criar componentes de design estilizados e funcionais é essencial para construir websites modernos e atrativos. Neste artigo, vamos mostrar como construir três componentes essenciais usando CSS: botões, cards de conteúdo e um menu de navegação simples. Vamos ao passo a passo!

1. Botão Estilizado

Os botões são elementos essenciais para qualquer site. Vamos criar um botão simples, mas elegante, utilizando propriedades básicas de CSS.

HTML

<button class="custom-button">Clique Aqui</button>

CSS

.custom-button {
    background-color: #4CAF50; /* Cor de fundo */
    border: none; /* Remove bordas */
    color: white; /* Cor do texto */
    padding: 15px 32px; /* Espaçamento interno */
    text-align: center; /* Alinhamento do texto */
    text-decoration: none; /* Remove sublinhado */
    display: inline-block; /* Alinhamento em linha */
    font-size: 16px; /* Tamanho da fonte */
    margin: 10px 2px; /* Espaçamento externo */
    cursor: pointer; /* Muda o cursor ao passar o mouse */
    border-radius: 8px; /* Arredonda os cantos */
    transition: background-color 0.3s ease; /* Transição suave */
}

.custom-button:hover {
    background-color: #45a049; /* Cor de fundo ao passar o mouse */
}

Explicação:

background-color define a cor de fundo do botão.

padding e margin ajustam o espaçamento interno e externo.

border-radius arredonda os cantos.

transition define a transição suave na mudança de cor ao passar o mouse.

2. Card de Conteúdo

Os cards são ótimos para organizar informações de forma visual. Vamos criar um card simples com título, imagem e descrição.

HTML

<div class="card">
    <img src="https://via.placeholder.com/150" alt="Imagem do Card" class="card-img">
    <div class="card-content">
        <h2 class="card-title">Título do Card</h2>
        <p class="card-description">Esta é uma breve descrição do conteúdo do card.</p>
    </div>
</div>

CSS

.card {
    background-color: #fff; /* Cor de fundo */
    border: 1px solid #ddd; /* Borda */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    width: 300px; /* Largura do card */
    margin: 20px; /* Espaçamento */
    overflow: hidden; /* Esconde conteúdo que ultrapassa */
}

.card-img {
    width: 100%; /* Largura da imagem */
    height: auto; /* Altura automática */
}

.card-content {
    padding: 16px; /* Espaçamento interno */
}

.card-title {
    font-size: 20px; /* Tamanho do título */
    margin: 0 0 10px; /* Espaçamento */
}

.card-description {
    font-size: 14px; /* Tamanho da descrição */
    color: #555; /* Cor do texto */
}

Explicação:

box-shadow adiciona uma sombra ao redor do card, criando um efeito de profundidade.

overflow: hidden impede que elementos internos do card ultrapassem suas bordas.

padding nos elementos internos cria espaço ao redor do texto.

3. Menu de Navegação Simples

Um menu de navegação é essencial para guiar os usuários pelo site. Vamos criar um menu horizontal simples com links estilizados.

HTML

<nav class="navbar">
    <ul class="navbar-list">
        <li class="navbar-item"><a href="#" class="navbar-link">Home</a></li>
        <li class="navbar-item"><a href="#" class="navbar-link">Sobre</a></li>
        <li class="navbar-item"><a href="#" class="navbar-link">Serviços</a></li>
        <li class="navbar-item"><a href="#" class="navbar-link">Contato</a></li>
    </ul>
</nav>

CSS

.navbar {
    background-color: #333; /* Cor de fundo */
    padding: 10px; /* Espaçamento interno */
}

.navbar-list {
    list-style-type: none; /* Remove os marcadores da lista */
    margin: 0; /* Remove margens */
    padding: 0; /* Remove espaçamentos */
    display: flex; /* Layout em linha */
}

.navbar-item {
    margin-right: 20px; /* Espaçamento entre itens */
}

.navbar-link {
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove sublinhado */
    padding: 8px 16px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    transition: background-color 0.3s ease; /* Transição suave */
}

.navbar-link:hover {
    background-color: #575757; /* Cor de fundo ao passar o mouse */
}

Explicação:

display: flex no .navbar-list organiza os itens em linha.

border-radius no .navbar-link arredonda os cantos dos links.

transition com background-color cria um efeito suave ao passar o mouse.

Conclusão

Estes são exemplos básicos, mas você pode personalizá-los conforme necessário para se adequarem ao estilo do seu site. Praticar a construção de componentes como estes ajuda a desenvolver habilidades em CSS e a criar designs mais ricos e funcionais.