CSS Align Button Right
Propriedades para o botão alinhado à direita no CSS
- Usando a propriedade de alinhamento de texto.
- Usando a propriedade Float.
- Usando a propriedade Justify-Content.
Exemplo # 1: Alinhe o botão direito usando a propriedade de alinhamento de texto
Crie seu arquivo HTML para criar o botão e, para alinhar este botão, temos que criar o CSS. Vamos elaborar os exemplos dados em nosso estúdio de código visual. Então, temos que gerar o arquivo HTML, e o código deste arquivo HTML é colado abaixo na imagem.
Aqui, criamos dois botões diferentes e depois queremos alinhar um botão à direita para que você possa aprender facilmente a diferença entre o botão original e o botão alinhado certo. Portanto, para este alinhamento de botões, temos que utilizar a propriedade CSS Text-Align. Quando usamos essa propriedade no botão que criamos, o botão define sua posição para o lado direito da página. No arquivo CSS, você pode ver como usar esta propriedade.
Código CSS
Aqui, o código CSS também é dado abaixo. Usamos CSS para dar estilo ou dar alinhamento aos nossos botões. Neste código, você pode ver que estamos usando a propriedade "Text-Align".
Primeiro, usamos o “.”E o nome do nosso primeiro botão, que é“ BTN-original ”aqui, e dentro dos aparelhos encaracolados deste primeiro botão, usamos a propriedade“ Text-Align ”e a configuramos como“ Esquerda."Escrevemos o título do segundo botão, que é" btn-right ", colocando. “” Novamente e dentro dos aparelhos encaracolados, usamos novamente a mesma propriedade, e desta vez alinhamos o botão ao lado “direito” da página ou tela.
Saída:
A saída mostra dois botões nos quais o botão original é exibido no lado esquerdo e, em seguida, o botão é deslocado para o lado direito da tela.
Exemplo # 2: Alinhe o botão direito usando a propriedade Float
Neste arquivo html, novamente projetamos dois botões. O nome do primeiro botão é "botão" aqui, e o nome do segundo botão é "botão direito.”Neste exemplo, vamos usar outra propriedade para alinhar o botão à direita. A propriedade que usamos no CSS deste código é a propriedade "Float". Funciona da mesma forma que a propriedade "Alinhamento de texto".
Código CSS
Neste arquivo CSS, usamos a propriedade Float. A propriedade Float no CSS é usada para flutuar o elemento ou objeto ou botão para os lados direito e esquerdo. O ".Original ”é usado para aplicar o design no botão“ original ”. Dentro disso, aplicamos a propriedade "Float" e a configuramos para a "esquerda", para que o botão original seja colocado no canto esquerdo da tela. Dentro de ".botão direito ", definimos a propriedade" Direita "para a propriedade" Float ". Isso colocará nosso segundo botão no canto direito da tela.
Saída
Na imagem acima, o botão está alinhado ao canto direito da tela. Aqui, usamos a propriedade "Float" e você pode vê-la exibir a saída da mesma forma que a propriedade "Alinhamento de texto" mostrou.
Exemplo # 3: Alinhe o botão direito usando a propriedade Justify-Content
No terceiro exemplo, criamos apenas um botão usando a classe DIV e depois usamos a terceira propriedade do CSS, que é a propriedade "Justify-Content". Esta propriedade também alinha o botão à esquerda ou à direita, mas temos que alinhar o botão apenas à direita
Código CSS
Neste arquivo CSS, também alteramos a cor "plano de fundo" para "rosa" e definimos o "preenchimento" como "10px" de cima e inferior e "0" para a direita e esquerda. A “exibição” que usamos aqui é “flex” e, em seguida, use a terceira propriedade do CSS que é “Justify-Content” e defina-o como “FLEX-END”, para que esse “flexão flexível” defina o botão à direita fim.
Saída
A cor do fundo é rosa aqui, pois usamos “cor de fundo” para “rosa.”O botão está na extremidade direita, pois usamos a propriedade“ Justify-Content ”em nosso arquivo CSS deste exemplo.
Exemplo # 4
Neste quarto exemplo, criamos seis botões diferentes usando a classe de botão em html. Agora, usamos cores diferentes para todos os seis botões e alinham três botões à “direita” usando a propriedade CSS, e três estão no local original, que é “esquerda”, onde não usamos nenhuma propriedade.
Código CSS
A cor do primeiro botão é "verde" e o código para isso é "#4CAF50". Não precisamos de fronteira, então a fronteira é “Nenhum."A" cor "do texto escrita dentro desses botões é" branca."Os padrões superiores e inferiores são" 15px ", e os padrões esquerdo e direito são" 32px ". O "alinhamento de texto" está centrado, então o texto dentro do botão aparece no centro do botão. A "decoração de texto" também é "nenhum."O" tamanho da fonte "está definido como" 16px ". As margens superior e inferior são "4px" e as margens direito e esquerdo são "2px". O "ponteiro" está aqui para ser usado como um "cursor.”
Em seguida, alinhamos esse botão à direita, por isso temos o "flutuação" aqui, que é definido para o "direito."Além disso, altere a cor do botão próximo e aplique" vermelho "aqui, e não use nenhuma propriedade para alinhar o botão; portanto, por padrão, este botão será exibido no lado esquerdo. O quarto botão, "cor de fundo", é branco, então também mudamos a "cor" do texto para "preto" e flutuar este quarto botão para a direita. Depois de alterar a cor do quinto e o sexto botões para cinza, usamos novamente "Float: Certo" com o sexto botão. Vamos verificar como isso mostrará esses botões no navegador.
Saída
Nesta saída, temos seis botões nos quais três botões são renderizados no lado direito, onde usamos a propriedade “Float.”Então, com a ajuda desta propriedade, três botões flutuam para o lado direito. E também, três botões estão do lado esquerdo, pois não usamos nenhuma propriedade para esses três botões. As cores desses botões também são diferentes.
Conclusão
Este tutorial discutiu as três propriedades que o CSS fornece para alinhar o botão no canto direito da tela. Explicamos todas as três propriedades do CSS em detalhes que são "alinhadas de texto", "Float" e "Justify-Content" Properties. Geramos três exemplos diferentes e aplicamos as propriedades alternativas em cada exemplo e exibimos a saída de todos os códigos também, para que você possa facilmente obter esse ponto sobre como alinhar o botão à direita. Este tutorial ajudará você a alinhar seu botão ao lado direito usando as propriedades do CSS.