Estilizando botões com CSS

Com agrupamento de regras do CSS podemos mudar completamente o visual de elementos.

Publicado em 07/01/2021 20:45

Usar framework front-end é uma maravilha, nosso único trabalho é instalar as dependências e entender na documentação como usar classes do CSS, não é mesmo? Pois bem, com o nosso artigo você vai aprender a estilizar seus próprios botões sem auxilio de nenhum framework.

Antes de qualquer coisa, é importante dizer que não é errado usar framework, mas se você usa um sem saber como a maioria dos seus componentes funcionam, sugiro estudar mais como tudo funciona de forma pura, não é bom ser dependente de frameworks, muitos projetos requer otimização e por isso não seguem nenhuma biblioteca de terceiros.

Para esse projeto, usamos a classe btn que remove algumas configurações pré-definidas no navegador, em seguida, temos outras classes como a btn-success que é responsável apenas por aplicar cores.

A gente preparou uma videoaula bem explicativa de como estilizar os botões, então confira ela logo abaixo.

Agora que você entendeu e aprendeu, confira todo o código fonte utilizado em abaixo.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botões CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <h1>Links</h1>

    <a href="#" class="btn btn-success">btn btn-success</a>
    <a href="#" class="btn btn-info">btn btn-info</a>
    <a href="#" class="btn btn-danger">btn btn-danger</a>

    <br>
    <br>
    <br>
    <hr>

    <h1>Botões</h1>

    <button class="btn btn-success">btn btn-success</button>
    <button class="btn btn-info">btn btn-info</button>
    <button class="btn btn-danger">btn btn-danger</button>
</body>

</html>

style.css

:root {
    --cor-primaria-success: rgb(75, 200, 138);
    --cor-hover-success: rgb(116, 158, 137);
    --cor-secundaria-success: rgb(27, 66, 50);
    
    --cor-primaria-info: rgb(61, 157, 246);
    --cor-hover-info: rgb(116, 134, 158);
    --cor-secundaria-info: rgb(31, 62, 88);

    --cor-primaria-danger: rgb(200, 75, 75);
    --cor-hover-danger: rgb(158, 116, 116);
    --cor-secundaria-danger: rgb(58, 22, 22);
}

.btn {
    border: none;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background .3s;
    border-radius: 5px;
}

/*SUCCESS*/
.btn-success {
    background-color: var(--cor-primaria-success);
    outline: none;
    color: var(--cor-secundaria-success)
}

.btn-success:hover {
    background-color: var(--cor-hover-success);
}

.btn-success:active {
    color:var(--cor-primaria-success);
    background-color: var(--cor-secundaria-success);
}

/*INFO*/
.btn-info {
    background-color: var(--cor-primaria-info);
    outline: none;
    color: var(--cor-secundaria-info)
}

.btn-info:hover {
    background-color: var(--cor-hover-info);
}

.btn-info:active {
    color:var(--cor-primaria-info);
    background-color: var(--cor-secundaria-info);
}

/*DANGER*/
.btn-danger {
    background-color: var(--cor-primaria-danger);
    outline: none;
    color: var(--cor-secundaria-danger)
}

.btn-succdangeress:hover {
    background-color: var(--cor-hover-danger);
}

.btn-danger:active {
    color:var(--cor-primaria-danger);
    background-color: var(--cor-secundaria-danger);
}

Por hora é isso, dúvidas deixem nos comentários.