Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como mudar o botão ao atualizar a página?

Nos próximos vídeos ao atualizar a página o botão de "Enviar" fica menor e depois aumenta ao atualizar a página... Como podemos usar o mesmo efeito?

4 respostas

Oi Luana,

Você quer dizer o efeito de aumentar o botão ao passar o mouse?

Se for isso, o professor utilizou a propriedade transform: scale, juntamente com o transition, veja:

.enviar {
    transition: 1s all;
}

.enviar:hover {
     transform: scale(1.2);
}

Não seria esse efeito, nos próximos vídeos que é ensinado a fazer esse efeito, ao carregar/atualizar a página, o botão tem um efeito de surgimento..

solução!

Assisti novamente os vídeos e realmente existe um efeito quando ele recarrega a página, eu não tinha percebido, rsrs

Aparentemente ele não aborda isso no curso, mas uma das maneiras de fazer seria da seguinte forma:

@keyframes animacao_btn_enviar {
    0% {
        transform: scaleY(0.5);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.enviar {
    width:40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
    animation-delay: 1s;
    animation-duration: .5s;
    animation-name: animacao_btn_enviar;
}

Ali utilizei a propriedade animation do CSS, com ela você consegue criar animações mais complexas sem precisar de javascript.

Encontrei um artigo que explica com mais detalhes https://www.alura.com.br/artigos/css-animacoes-com-transitions-animations

Obrigada Marcos s2