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?
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