Animação simples de background no botão usando CSS

Hey galerinha, no artigo de hoje vamos dar continuidade ao nosso projeto, dessa vez temos os dois botões abaixo da textarea de input do usuário. Primeiro pegamos a classe da div que guarda os dois botões e adicionamos um display do tipo flex, seguido de um flex-wrap do tipo wrap, para que caso a tela seja menor, nossos botões ficaram um abaixo do outro, ficando lado a lado apenas se existir espaço na tela para isso, sendo que um justify-content do tipo center, fará com que esse botões fiquem centralizados na tela.

.container-general__service-buttons {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

Agora, pegamos as classes adicionadas nos botões para adicionar o básico da estilização. Começando pela uma margin de 0.5rem, e uma altura de 4rem e uma largura de 20rem. Completamos nossa estilização com o radio da borda em 1rem e um peso de fonte de 100px.

.container-general__service-buttons__encrypts,
.container-general__service-buttons__decrypts {
 margin: 0.5rem;
 height: 4rem;
 width: 20rem;
 border-radius: 1rem;
 font-weight: 100px;
}

Começando pela estilização única do botão de encriptação, retiramos a borda padrão do botão com um border none, para nossa animação de background, adicionamos um background do tipo linear-gradient sendo 50% para cada cor, posicionado na direita com um tamanho de 200% e 100% para cada uma das cores. dessa forma teremos duas cores, mas apenas a cor que está na esquerda irá preencher o botão. Por fim, colocamos uma cor branca no texto e uma transição de 3 segundos com uma ease-out como função de facilitação

.container-general__service-buttons__encrypts {
 border: none;
 background: linear-gradient(to right, #264D39 50%, #4C9971 50%);
 background-position: right bottom;
 transition: all 300ms ease-out;
 background-size: 200% 100%;
 color: #fff;
}

Por fim pegamos a classe do botão novamente só que adicionamos um :hover após para estilização do que acontece assim que o usuário passar o mouse por cima do botão, nesse caso só mudamos a posição do background para aparecer a segunda cor do gradiente.

.container-general__service-buttons__encrypts:hover {
 background-position: left bottom;
}

Fazemos o mesmo no botão de desencriptar, porém aqui o botão começa transparente e muda para outra cor, bem como a cor da fonte fica branca.

.container-general__service-buttons__decrypts {
 background: none;
 border: 1px solid #264D39;
 background: linear-gradient(to right, #264D39 50%, transparent 50%);
 background-position: right bottom;
 transition: all 300ms ease-out;
 background-size: 200% 100%;
 color: #264D39;
}

.container-general__service-buttons__decrypts:hover {
 background-position: left bottom;
 color: #fff;
}

Sendo assim, nossos botões estão prontos, agora vamos estilizar a nossa saída de dados e o nosso rodapé para podermos entender um pouco sobre responsividade antes de partir para a construção da lógica do nosso projeto usando JavaScript, um abraço e até a próxima.

https://francileudo-frontend.blogspot.com/2022/09/animacao-simples-de-background-no-botao.html