Botões de canto arredondados do CSS

Neste post, examinaremos as propriedades do estilo CSS para arredondar a borda de um raio. A propriedade da fronteira é nosso foco principal neste artigo. O valor da propriedade do rádio da fronteira dá à borda retangular uma transformação para ser um pouco rodada, dependendo do valor. Essa propriedade de estilo do CSS também pode ser subdividida em quatro porções que se aplicarão a todos os cantos da fronteira e podem ser usados ​​para definir valores diferentes para eles.

Exemplo 01: Usando a tag de estilo CSS em um arquivo html para criar um botão de canto arredondado

Neste exemplo, usaremos a abordagem de tag de estilo CSS para criar um botão de canto arredondado em um arquivo html. O elemento do botão padrão da linguagem de marcação de hipertexto será remodelado em um botão com cores e bordas redondas neste exemplo. Vamos dar uma olhada no script que criaremos para concluir esta tarefa:

No script fornecido, abrimos nosso cabeçalho de arquivo. No cabeçalho do arquivo, definimos o estilo do elemento de botão. Para isso, abrimos uma etiqueta de estilo e chamamos a classe de botão, onde definimos as várias propriedades de estilo. A primeira propriedade seria o raio da borda do botão que cria uma borda para o botão com cantos redondos. Em seguida, adicionamos a cor ao plano de fundo do botão usando a propriedade cor de fundo. Depois disso, definimos a largura e a altura do botão em pixels e depois fechamos o estilo e as tags de cabeça. Agora, abrimos a etiqueta corporal e damos um título para a página com a ajuda da tag H1. Em seguida, abrimos a tag de botão e chamamos a classe de botão dentro da tag. Isso herdará todas as propriedades de estilo que são definidas na tag de estilo. Depois disso, fechamos todas as tags e salvamos o arquivo para abri -lo em nosso navegador.

Na saída anterior, podemos ver que o botão tem cantos arredondados devido ao estilo CSS que especificamos na classe de botão. Agora, alteramos a propriedade do radio de fronteira e observamos a mudança na borda do botão.

Agora, aumentamos o comprimento do pixel do raio da borda no script anterior e não fazemos mais mudanças além disso. Depois de salvar e abrir este arquivo, obteremos a seguinte saída:

Podemos ver que o botão na saída fornecida tem extremidades redondas completamente e é diferente da versão anterior quando o raio da borda foi aumentado no script.

Exemplo 02: Usando CSS embutido para fazer um botão com cantos arredondados

Neste exemplo, a abordagem CSS embutida será adotada para transformar o botão padrão, dando -o com bordas redondas e adicionando uma cor ao fundo. Adicionaremos o estilo dentro da tag do botão neste exemplo, como mostrado no seguinte snippet:

No script fornecido, iniciamos nosso código da etiqueta corporal, pois não há uso do cabeçalho do arquivo nesse cenário. Na etiqueta corporal, adicionamos um título primeiro à página abrindo a tag H1 e depois seguimos para a tag de botão. Nesta tag, escrevemos as propriedades de estilo usando a palavra -chave CSS "estilo". Entre as vírgulas invertidas, as propriedades são atribuídas, separadas por semicolons. A primeira propriedade é o Radio de Fronteira e seu valor é "10px". Em seguida, atribuímos a cor do fundo e atribuímos a altura e a largura do botão. Depois disso, fechamos o botão e as tags do corpo para encerrar o arquivo. E então salve -o no “.formato de arquivo html ”para que possamos abri -lo em nosso navegador.

A saída mostra que transformamos o botão padrão, dando -lhe uma borda redonda e fundo branco usando o CSS embutido dentro da tag do botão.

Exemplo 03: Usando as diferentes propriedades relacionadas ao raio da borda no CSS em um botão

Neste exemplo, usaremos as diferentes propriedades relacionadas ao raio da fronteira que o CSS fornece sobre a perspectiva de posicionamento. Discutiremos essas propriedades diferentes e as implementamos no script a seguir para um arquivo HTML:

No script anterior, adicionamos quatro propriedades diferentes sobre o raio da borda, que é o canto superior esquerdo, superior direito, canto inferior esquerdo e inferior direito. Todas essas propriedades representam os quatro lados da borda e CSS do botão nos permitem editar todos os lados da fronteira, separadamente. Então, atribuímos o lado esquerdo da borda do botão com valores de raio semelhantes e o lado direito da borda do botão com valores de raio semelhantes. Isso criará duas formas de borda diferentes em ambos os lados da borda do botão. Em seguida, também adicionamos uma cor ao fundo do botão e atribuímos uma largura e altura fixa para o elemento do botão. Depois disso, damos à página um título na etiqueta do corpo e criamos um botão na etiqueta do corpo também. A tag de botão herdará a classe de tags de estilo que possui todas as diferentes propriedades de estilo para criar uma forma única para a borda do botão.

Depois de abrir o arquivo de script anterior em nosso navegador, teremos o resultado determinado. Como podemos ver, o botão tem dois estilos diferentes da borda de ambos os lados. Isso aconteceu porque atribuímos os diferentes valores do raio da borda para os dois lados do botão.

Exemplo 04: Usando CSS para alterar os cantos da fronteira de um botão quando ele será pairado

Neste exemplo, mudaremos a borda do botão quando ele for pairado. A abordagem CSS de etiqueta de estilo seguirá para criar um efeito de pairar no botão. Neste exemplo, criaremos uma classe separada e uma função específica a ser herdada também para esta classe.

Neste script, criamos uma classe de estilo no cabeçalho do arquivo para o elemento do botão. Em seguida, criamos uma nova função de propriedade para esta classe chamada “Passe o Passe”. Nesta função, definimos o raio da borda como "10px", que resulta em uma animação da transição da borda para uma borda redonda. Agora, fechamos o cabeçalho da tag depois de concluir todas as propriedades relacionadas ao estilo. Na etiqueta corporal, criamos um título usando a tag H1 e abrimos uma tag de botão também. Nesta tag de botão, usamos a classe de botão do cabeçalho do arquivo para herdar todas as propriedades de formatação. Depois de salvar o arquivo, abrimos em nosso navegador.

A saída mostra o efeito pós-prejudicado no botão, pois foi definido na aula de estilo e sua função.

Conclusão

Neste artigo, discutimos as várias abordagens para criar um botão com cantos arredondados usando os diferentes estilos CSS, que são o CSS embutido e a etiqueta de estilo CSS. Observamos as diferentes propriedades relacionadas a esse fenômeno neste artigo. E implementou essas variações no bloco de notas ++ para entender uma melhor compreensão desse conceito.