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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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?
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..
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