Como criar um botão animado com HTML e CSS

Como desenvolvedor, você pode inserir vários tipos de elementos nas páginas web com a aparência que você quiser, usando HTML e CSS, você poderá deixar as páginas que você desenvolver um pouco mais interativa.

Dentre as possibilidades que você poderá fazer com HTML e CSS, você poderá criar elementos que são animados, a animação destes elementos são ativados quando o usuário faz alguma ação na página web, como, por exemplo, o clique.

Com objetivo de mostrar para você como uma animação funciona, neste artigo, você vai conhecer o passo a passo necessário para criar um botão animado usando apenas HTML e CSS, animações deste botão vai ser ativada quando o usuário colocar o cursor do mouse sobre o botão.

Quando isto acontecer, o tamanho do botão será maior e sua cor mudará, quando o usuário remover o cursor do mouse de cima do botão, o botão voltará ao seu tamanho normal e com a cor original.

Primeiramente, antes de mostrar para você como você vai criar esse botão, você deve verificar se você tá com o seu ambiente de desenvolvimento pronto, ou seja, você deve verificar se já tem algum editor de texto instalado.

caso você não tenha, você poderá instalar um, tem vários editores de texto que você poderá usar, uma opção bastante popular é o visual studio code.

Com o editor de texto instalado, o próximo passo que você precisa fazer é criar uma pasta com qualquer nome que você quiser, dentro desta pasta, você deve criar dois arquivos, eles são o index.html e style.css.

Aprenda programar e desenvolver sistemas profissionais

Depois de criar os arquivos, você deve abrir a pasta que você criou no editor de texto, selecione o arquivo index.html e coloque todo código que estar logo abaixo, você poderá escrever linha por linha ou apenas copiar.

Conheça o Curso Full-Stack da B7Web em detalhes.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="style.css">

        <title>Botão</title>

    </head>

    <body>

        <button>Clique aqui!</button>

    </body>

</html>

Se você for visualizar o resultado do código do arquivo index.html em um navegador, logo você vai perceber que o botão não apresenta nenhuma aparência, ou seja, é um simples botão, o próximo passo será adicionar uma aparência para esse botão, e também, inserir as propriedades que vão deixar o botão animado.

Portanto, coloque todo código que estar logo mais abaixo no arquivo style.css.

button {

    width: 200px;

    height: 70px;

    font-size: 22px;

    font-family: tahoma;

    border:none;

    border-radius: 7%;

    background-color: #3bdcb1;

    color: #f5f5f5;

    cursor:pointer;

}

button:hover{

    background-color: #68c9af;

    Color: #fff;

    width: 220px;

    height: 75px;

    font-size: 25px;

    border-radius: 0;

    transition-duration: 1s;

}

Abra novamente o projeto em algum navegador, como você deve ter notado, o botão apresenta uma aparência diferente, e se você colocar o cursor do mouse em cima do botão, o botão vai ficar maior, você deve ter visto um resultado semelhante a esse.

Aprenda programar e desenvolver sistemas profissionais

Se você quiser saber o que cada propriedade CSS faz, você poderá consultar qualquer dúvida sobre CSS na w3schools.