Estilizando botões com CSS

Gunnar CorreaGunnar Correa07/01/2021 às 20:45:15 - 398 acessos

Estilizando botões com CSS

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


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.


css botões css pseudo-classes css botões css links estilizar botões css css alterar cor de botão css para iniciantes aprenda css css ninja

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com