Imagem do botão CSS

Usaremos CSS no elemento do botão da linguagem de marcação de hipertexto neste artigo. Geralmente, o elemento de botão padrão é muito simples e não tem estilo e efeitos presentes. Com a ajuda do CSS, usamos as diferentes propriedades de estilo e os adicionamos a este elemento. Essas propriedades estão relacionadas ao estilo de texto, ajuste de tamanho, cores de fundo, efeitos de animação e adição de imagens. Neste artigo, focaremos principalmente em adicionar uma imagem a uma propriedade de botão aplicável através do CSS. Para implementar essa abordagem, usaremos o bloco de notas ++, que nos ajudará a editar nosso arquivo HTML e o teste o executar em nosso navegador.

Exemplo 01: Usando a tag de estilo CSS para adicionar uma imagem em um botão em um arquivo html

Neste exemplo, adicionaremos uma imagem dentro de um botão usando a tag de estilo CSS no cabeçalho do arquivo. Dentro da etiqueta de estilo, construiremos uma classe para o botão, que será chamado mais adiante no corpo. Em seguida, criaremos um script no qual adicionaremos uma imagem a um botão usando a técnica que mencionamos anteriormente.

No script anterior, abrimos uma etiqueta de estilo no cabeçalho do arquivo. Nesta tag, abrimos os parâmetros da classe de botão nos quais definiremos várias propriedades de design para o elemento do botão. Primeiro, adicionamos a imagem para o fundo do botão. Podemos adicionar a imagem via "url" ou "src". Em seguida, adicionamos a propriedade de tamanho de fundo, que é declarada como uma "capa". Em seguida, definimos a largura e a altura do botão também. Depois disso, fechamos a etiqueta de estilo e nos movemos para a etiqueta corporal. Nesta tag, adicionamos um título usando a tag H1. Então, a tag de botão é chamada. Nesta tag, chamamos a aula de estilo que criamos anteriormente para herdar todo o estilo que é definido na classe. Em seguida, fechamos todas as tags restantes e salvamos o arquivo no formato HTML.

Como podemos ver na saída anterior, a imagem aparece como um botão na página do nosso navegador junto com o cabeçalho. Isso justifica que a aula de estilo foi herdada com sucesso pela tag de botão.

Exemplo 02: Adicionando uma imagem em um botão usando uma abordagem CSS embutida

Nesse caso, adicionaremos uma imagem a um botão usando a abordagem CSS embutida. Adicionaremos uma imagem a um elemento de botão padrão da linguagem de marcação de hipertexto, dando -lhe um URL de uma imagem neste método. Agora, vamos dar uma olhada no script para esta técnica.:

No script refletido na imagem, podemos ver que o cabeçalho do arquivo está vazio porque usaremos a abordagem CSS embutida neste exemplo. Abrimos nossa tag de botão. Na tag, mencionamos o CSS que queremos que o botão tenha na propriedade Style. Mencionamos todo o estilo nesta propriedade e os separamos com semicolons. Também adicionamos uma imagem usando a palavra -chave da imagem de fundo e atribuímos uma imagem via URL. Em seguida, a tag de botão está fechada junto com a etiqueta corporal. Depois disso, abrimos este arquivo html em nosso navegador.

A saída anterior é uma evidência de que a abordagem de tag estilos em linha tem sido um sucesso. Podemos ver que a imagem é adicionada ao botão e o botão padrão agora é transformado em uma imagem.

Exemplo 03: Usando as tags de estilo CSS para adicionar uma imagem a um botão quando ela passa

Adicionaremos uma imagem a um botão que aparecerá apenas quando o botão for pairado neste exemplo. Usaremos a etiqueta de estilo CSS para fornecer um botão com esse comportamento em um arquivo html. Criaremos uma classe separada para segregar esse estilo para um elemento específico neste exemplo. Para atingir esse objetivo, devemos escrever o seguinte script:

No script anterior, abrimos nossa etiqueta de cabeça para o arquivo html. Nesta tag, o estilo do botão é definido abrindo uma classe para o elemento do botão. Nesta classe, definimos a largura e a altura do botão primeiro. Em seguida, adicionamos uma propriedade que transforma o cursor em um ponteiro e damos ao texto um tamanho razoável. Em seguida, adicionamos um método herdado chamado "Passe" para a classe. Nesta função, adicionamos uma imagem ao plano de fundo via URL e atribuímos uma propriedade ao tamanho do fundo chamado "capa".

Depois disso, fechamos todas as tags de estilo e avançamos em direção ao corpo deste arquivo. Na etiqueta corporal, adicionamos um título usando a tag H1 e a tag de botão é aberta após a tag de título. Na tag de botão, chamamos a classe que criamos na etiqueta de estilo do cabeçalho do arquivo. E então, feche o botão e a etiqueta corporal. Depois disso, abrimos esse arquivo em nosso navegador para obter a seguinte saída:

A saída que vemos neste arquivo é o resultado depois que o botão foi pairado. Quando passamos o mouse sobre o botão, a imagem que atribuímos na etiqueta de estilo do cabeçalho do arquivo aparece.

Exemplo 04: transformação de tag de estilo CSS de um botão padrão em um ícone para a próxima e anterior função

Neste exemplo, transformaremos os dois botões padrão da linguagem de marcação de hipertexto usando a tag de estilo CSS. Vamos transformar os dois botões neste exemplo nos ícones seguintes e anteriores, adicionando uma imagem na tag de estilo. Devemos escrever o seguinte script para fazer isso:

No script anterior, adicionamos uma etiqueta de estilo no cabeçalho do arquivo. Em seguida, criamos duas classes para os dois botões na tag de estilo. Nessas classes, adicionamos uma imagem aos dois botões, respectivamente, usando a propriedade da imagem em segundo plano e o formato URL para a imagem. Depois de atribuir as duas classes com suas propriedades, fechamos o estilo e a tag de cabeça e abrimos a etiqueta corporal para criar o conteúdo da página do nosso navegador. Primeiro, damos à fronteira um título com a ajuda da tag H1, que é um tamanho de título definido em html. Então, criamos dois botões. Nos dois botões, atribuímos a classe relativa definida na tag de estilo. Depois disso, fechamos as guias e abrimos esse arquivo em nosso navegador depois de salvá -lo.

A saída anterior é o resultado do nosso script. Como podemos ver, os dois botões estão alinhados e as imagens das classes de estilo são inseridas corretamente. Agora, os botões padrão são transformados nos ícones seguintes e anteriores de uma página da web usando CSS.

Conclusão

Neste artigo, discutimos vários exemplos de adicionar as imagens a um botão usando CSS. Usamos o CSS e a tag de estilo em linha para adicionar as imagens a um botão padrão em um arquivo html. Implementamos vários efeitos em um botão para adicionar uma imagem como o efeito de pairar ou o fundo do estilo de capa usando o bloco de notas ++ para editar o arquivo html. Usamos as diferentes propriedades no estilo CSS do elemento de botão para transformá -las em um atributo atraente em nossa página da web.