Tamanho do botão CSS
Exemplo 01:
Neste exemplo, usaremos a propriedade de largura e altura para o elemento do botão aumentar seu tamanho. Usaremos a abordagem da tag de estilo CSS neste exemplo para adicionar várias propriedades. Primeiro, examinaremos o tamanho padrão do elemento de botão presente em um arquivo html.
Como podemos ver no script fornecido, não alteramos o tamanho do botão. Na saída a seguir, podemos ver que o tamanho do botão é muito pequeno e não é viável para uma página da web.
Então, agora adicionamos o estilo ao botão. Primeiro, abrimos a etiqueta da cabeça para o arquivo. Nesta tag, a tag de estilo para CSS é chamada. Nesta tag, adicionamos todas as propriedades para o elemento do botão. Escrevemos todas as propriedades para o elemento do botão dentro da classe de botão parênteses. Primeiro, definimos a cor de fundo para "amarelo". Em seguida, definimos a largura no formato pixel como "100px". Finalmente, definimos a altura no formato de pixel para "30px". Fechamos o estilo e as tags de cabeça depois que toda a formatação estiver completa. Então, vamos para a etiqueta corporal. Escrevemos a manchete da página usando a tag H1 na etiqueta do corpo e depois abrimos a tag de botão. A aula da tag de estilo é chamada na tag de botão. Depois disso, fechamos a tag de botão com o texto que é exibido no botão intermediário, bem como a etiqueta do corpo.
Conforme explicado anteriormente, adicionamos o código no script anterior. Agora, abrimos este novo script em nosso navegador depois de salvá -lo no formato correto.
Na saída fornecida, podemos ver que o botão tem toda a formatação, incluindo o tamanho que especificamos na classe de estilo no cabeçalho do arquivo.
Exemplo 02: Usando CSS embutido para alterar o tamanho de um botão em um arquivo html
Neste exemplo, usaremos o CSS embutido para alterar o tamanho do elemento de botão padrão de um arquivo HTML. Todas as propriedades do estilo serão atribuídas dentro da tag de botão. Este é um método não convencional para adicionar CSS a qualquer elemento e só estará associado ao elemento atual.
Como podemos ver no trecho anterior, nos mudamos diretamente para o corpo do arquivo, pois todo o conteúdo estaria na etiqueta do corpo. Primeiro, abrimos a tag H1 para escrever um título para a página e depois fechá -la. Em seguida, abrimos a tag de botão. Nesta tag, chamamos o atributo de estilo por sua palavra -chave. Depois disso, escrevemos todas as propriedades para o elemento do botão nas vírgulas invertidas e as separamos usando o personagem Semicolon. Primeiro, atribuímos a cor de fundo, "amarelo". Em seguida, atribuímos a largura no formato pixel. No final, atribuímos a altura, também no formato pixel. Depois disso, fechamos a tag de botão com o texto intermediário, que aparecerá no botão. E feche a etiqueta corporal junto com ela. Agora, salvamos este arquivo no “.Formato HTML ”e abra -o em nosso navegador para obter o seguinte resultado:
Como podemos ver na saída do nosso script, o cabeçalho e o botão da etiqueta corporal são visíveis. O botão tem todos os valores definidos na tag, incluindo a altura e a largura.
Exemplo 03: Aumentar o tamanho de um botão quando ele paira com o nosso cursor em um arquivo html
Neste exemplo, usaremos as propriedades de largura e altura do elemento do botão para torná -lo maior, somente quando o ponteiro terminar. Neste exemplo, usaremos as tags do estilo CSS para adicionar inúmeros atributos e efeitos ao elemento do botão.
Neste exemplo, personalizamos o botão usando as tags de estilo CSS. Primeiro, abrimos a etiqueta da cabeça do arquivo. E então, chamamos a tag de estilo CSS a partir daí. Adicionamos todos os atributos do elemento do botão nesta tag. Dentro da classe de botão parênteses, inserimos todas as propriedades para o elemento do botão; Neste exemplo, definimos a cor de fundo para “amarelo.”Então, abrimos uma aula de botão que herda um método chamado“ Passe o Passe ”. Nesta função, fazemos o seguinte: Definimos a largura no formato Pixel como "100px" e definimos a altura no formato de pixel como "30px". Depois de terminarmos a formatação, fechamos o estilo e as tags de cabeça. Então, vamos para a etiqueta corporal. Usamos a tag H1 para criar o título da página na etiqueta do corpo e depois abrimos a tag de botão. A tag de botão usa a classe da tag de estilo e tem o texto que aparece no botão entre. Depois disso, fechamos a tag de botão e a etiqueta corporal.
Como podemos ver na saída anterior, o tamanho e a cor do plano de fundo mudaram à medida que pairamos no botão com nosso cursor. Isso ocorre porque a função pairar tem todas essas propriedades definidas na etiqueta de estilo do arquivo do cabeçalho.
Exemplo 04: Usando o tamanho da fonte para aumentar o tamanho de um botão usando CSS
Neste exemplo, optaremos por um método diferente para alterar o tamanho de um botão. A propriedade de tamanho da fonte será usada para aumentar o tamanho de um botão usando a etiqueta de estilo CSS.
Primeiro, abrimos a etiqueta de estilo no cabeçalho do arquivo e criamos uma aula de estilo para o botão. Nesta classe, atribuímos uma cor de fundo ao botão. Depois disso, atribuímos o tamanho da fonte também. Nesse caso, ele está definido como "25px". Então, fechamos a classe e o estilo e as tags de cabeça, respectivamente. Então a etiqueta corporal tem um título e uma etiqueta de botão que tem a classe de tags de estilo herdada. Depois disso, fechamos as tags e salvamos o arquivo para abri -lo em nosso navegador.
Na tela de saída, podemos ver que o botão tem um tamanho aumentado a partir do botão padrão que o HTML fornece devido à alteração na propriedade de tamanho da fonte.
Conclusão
Neste artigo, discutimos o tamanho do elemento de botão presente na linguagem de marcação de hipertexto. O botão padrão tem um tamanho muito pequeno, o que dificulta a navegação em uma página da web. Então, usamos as diferentes abordagens em CSS, como a tag de estilo e a abordagem CSS embutida. A propriedade mais comum usada para alterar o tamanho é a propriedade de largura e altura de um botão. Discutimos esse conceito e implementamos isso no bloco de notas++. Também implementamos a abordagem do tamanho da fonte para aumentar o tamanho de um botão.