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

Botão enviar formulário ultrapassa a margem padrão

Pessoal, fiz o código e funcionou tudo de forma idêntica ao vídeo mas não consegui deixar de me incomodar com o fato de que o botão 'crescido' acabe ultrapassando a margem da página. Por mais que seja apenas durante o hover causa estranheza a margem bem definida até ali ser suplantada por uma animação.

Pesquisei diversas propriedades CSS mas não encontrei nada que me resolvesse. Queria saber se há uma forma de fazermos a animação crescer apenas para o outro lado respeitando a mesma margem padronizada da página.

Muito obrigado!

Edit:

Após pesquisar mais e testar, a única solução cabível que achei foi ao invés de usar scale dentro do hover como no Exemplo 1, aplicar width como no exemplo 2.

Exemplo 1: .enviar:hover { background: darkorange; transform: scale(1.2); }

Exemplo 2: .enviar:hover { background: darkorange; width: 50%; }

Entendo que seja uma solução mas não é exatamente o que eu queria, nem sei se é possível...

3 respostas
solução!

Fala ai Gustavo, tudo bem? Realmente o scale vai aumentar o tamanho do botão e ultrapassar espaçamentos.

O que você pode fazer é tentar aumentar o padding do botão, o que vai ocasionar o aumento do mesmo.

Ou seguir como tu fez, aumentando width e até mesmo o height caso necessário.

Todas são soluções válidas.

Espero ter ajudado.

Opa Matheus, muito obrigado! Era mais para saber se existia como colocar uma origem do movimento em um determinado ponto, não partindo necessariamente do meio.

Mas foi muito bom, acabei topando com várias outras propriedades e possibilidades.

Mais uma vez, muito obrigado!

Magina Gustavo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software