Neste artigo, vamos explorar um código HTML que demonstra como criar um botão utilizando CSS e HTML. O código HTML fornecido apresenta uma estrutura básica de um documento HTML e inclui elementos importantes, como metadados, estilos CSS e um botão com um link. Vamos analisar cada parte desse código e discutir como podemos personalizar o botão usando CSS.
O Código HTML: O código HTML fornecido é o seguinte:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="keywords"
content="criar um botão, HTML5, CSS3, estilizando um botão com CSS e HTML"
/>
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Botão com CSS e HTML</title>
</head>
<body>
<div class="container">
<a href="https://pauliniamaker.com.br/" target="_blank">
<span>home</span>
</a>
</div>
</body>
</html>
Analisando o código:
<!DOCTYPE html>: Esta é uma declaração que define o tipo de documento como HTML5. Ela informa ao navegador que o documento segue as especificações do HTML5.<html lang="pt-br">: Esta tag<html>envolve todo o conteúdo HTML do documento e define o idioma do documento como português brasileiro.<head>: A tag<head>contém metadados e informações sobre o documento, como a codificação de caracteres, a folha de estilo CSS e o título da página exibido na barra de título do navegador.<meta charset="UTF-8" />: Esta meta tag define a codificação de caracteres do documento como UTF-8, que suporta uma ampla variedade de caracteres, incluindo caracteres acentuados.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Essa meta tag instrui o Internet Explorer a usar a versão mais recente do mecanismo de renderização disponível.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Essa meta tag é usada para configurar a escala inicial e a largura do viewport em dispositivos móveis.<meta name="keywords" content="...">, fornecemos as palavras-chave relevantes para fins de SEO. Essas palavras-chave incluem “criar um botão”, “HTML5”, “CSS3” e “estilizando um botão com CSS e HTML”. Isso pode ajudar a melhorar a visibilidade do seu artigo nos mecanismos de busca ao indicar o conteúdo relevante que ele oferece.<link rel="stylesheet" type="text/css" href="./style.css" />: Esta tag de link estabelece uma conexão entre o documento HTML e o arquivo de estilo CSS externo chamado “style.css”. O CSS é usado para estilizar o botão e outros elementos da página.<title>Botão com CSS e HTML</title>: A tag<title>define o título da página, que será exibido na barra de título do navegador.<body>: A tag<body>contém todo o conteúdo visível da página, como texto, imagens e elementos interativos.<div class="container">: Essa<div>define um contêiner com a classe “container”. As classes são usadas para aplicar estilos específicos a elementos HTML usando CSS.<a href="https://pauliniamaker.com.br/" target="_blank">: A tag<a>é usada para criar um link.
Ao desenvolver um botão personalizado em um site ou aplicação web, o arquivo style.css desempenha um papel fundamental na definição dos estilos visuais e interativos. Neste artigo, vamos explorar o código CSS fornecido e entender como ele estiliza o botão criado com HTML. O arquivo style.css contém uma série de regras que controlam os aspectos de design, como cores, tamanhos, posicionamento e efeitos aplicados ao botão.
Vamos analisar cada parte do código CSS em detalhes para entender como as propriedades e seletores são utilizados para criar a aparência visual desejada. Através dessas explicações, você poderá compreender melhor como estilizar elementos HTML usando CSS, e aplicar esses conhecimentos para criar seus próprios botões personalizados.
Portanto, vamos mergulhar no código e desvendar os segredos do arquivo style.css, para que você possa aprender como estilizar e aprimorar seus próprios botões utilizando HTML e CSS.
O arquivo style.css:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0e1538;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container a {
position: relative;
width: 160px;
height: 60px;
display: inline-block;
background: fff;
margin: 20px;
}
.container a:before,
.container a:after {
content: "";
position: absolute;
inset: 0;
background: #f00;
transition: 0.5s;
}
.container a:nth-child(1):before,
.container a:nth-child(1):after {
background: linear-gradient(45deg, #ff075b, #0e1538, #0e1538, #00ccff);
}
.container a:hover:before {
inset: -3px;
}
.container a:hover:after {
inset: -3px;
filter: blur(10px);
}
.container a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: #0e1538;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
border: 1px solid #040a29;
overflow: hidden;
}
.container a span::before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.075);
transform: skew(25deg);
}
Explicando o arquivo style.css:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
Essa regra @import importa a fonte Poppins do Google Fonts com peso 300. Ela é usada para definir o estilo da fonte aplicada a todos os elementos do documento HTML. A URL fornecida pelo Google Fonts é utilizada para importar a fonte externa.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
Aqui, o seletor * é usado para aplicar as seguintes propriedades a todos os elementos do documento HTML:
margin: 0;remove as margens externas dos elementos.padding: 0;remove os preenchimentos internos dos elementos.box-sizing: border-box;define o modelo de caixa como “border-box”, o que garante que a largura e altura total do elemento incluam as bordas e o preenchimento.font-family: "Poppins", sans-serif;define a família de fontes padrão como “Poppins” e, se não estiver disponível, usa uma fonte sans-serif genérica.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0e1538;
}
Nessa seção, estilizamos o elemento <body>, que é o corpo principal da página HTML. As seguintes propriedades são aplicadas:
display: flex;define o modelo de layout do corpo como flexível, permitindo que os elementos dentro dele sejam organizados em um layout flexível.justify-content: center;alinha horizontalmente o conteúdo do corpo no centro.align-items: center;alinha verticalmente o conteúdo do corpo no centro.min-height: 100vh;define a altura mínima do corpo como 100% da altura da janela do navegador, garantindo que o conteúdo ocupe pelo menos toda a altura vertical disponível.background-color: #0e1538;define a cor de fundo do corpo como “#0e1538”, um tom escuro de azul.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Essa regra estiliza a classe .container, que é aplicada a uma <div> que envolve o botão. As seguintes propriedades são aplicadas:
display: flex;define o modelo de layout do contêiner como flexível.justify-content: center;alinha horizontalmente os elementos dentro do contêiner no centro.align-items: center;alinha verticalmente os elementos dentro do contêiner no centro.flex-direction: column;organiza os elementos dentro do contêiner em uma coluna, em vez da direção padrão de linha.
.container a {
position: relative;
width: 160px;
height: 60px;
display: inline-block;
background: #fff;
margin: 20px;
}
Nessa regra, estamos estilizando os elementos <a> que estão dentro do contêiner com a classe .container. Vamos examinar as propriedades aplicadas:
position: relative;define a posição do elemento como relativa em relação ao seu posicionamento normal. Essa propriedade é importante para posicionar elementos filhos com base na posição do elemento pai.width: 160px;define a largura do elemento como 160 pixels.height: 60px;define a altura do elemento como 60 pixels.display: inline-block;define o elemento como um bloco inline, o que permite que outros elementos fiquem ao lado dele na mesma linha.background: #fff;define a cor de fundo do elemento como branco (#fff).margin: 20px;define uma margem de 20 pixels ao redor do elemento, criando um espaço entre esse elemento e outros elementos próximos.
No contexto do código fornecido, essas propriedades estão estilizando os links <a> dentro do contêiner para criar a aparência de botões retangulares. Eles terão uma largura fixa de 160 pixels, altura de 60 pixels, cor de fundo branca e uma margem de 20 pixels ao seu redor para criar um espaçamento visual agradável. A posição relativa também pode ser útil para posicionar outros elementos dentro desses botões, usando propriedades como position: absolute nos elementos filhos.
.container a:before,
.container a:after {
content: "";
position: absolute;
inset: 0;
background: #f00;
transition: 0.5s;
}
Essa regra estiliza os pseudo-elementos ::before e ::after dos elementos <a> dentro do contêiner com a classe .container. Vamos analisar as propriedades aplicadas:
content: "";define o conteúdo do pseudo-elemento como vazio. Os pseudo-elementos::beforee::afterrequerem a propriedadecontent, mesmo que estejam vazios.position: absolute;define a posição do pseudo-elemento como absoluta em relação ao elemento pai. Isso permite que o pseudo-elemento seja posicionado de forma independente do conteúdo do elemento pai.inset: 0;define as distâncias do pseudo-elemento em relação às bordas do elemento pai como zero. Isso faz com que o pseudo-elemento ocupe todo o espaço disponível dentro do elemento pai.background: #f00;define a cor de fundo do pseudo-elemento como vermelho (#f00).transition: 0.5s;adiciona uma transição suave de 0,5 segundos para as propriedades que sofrerem alterações nos pseudo-elementos. Isso cria um efeito de transição suave quando os estilos dos pseudo-elementos mudarem.
No contexto do código fornecido, esses pseudo-elementos ::before e ::after são utilizados para adicionar camadas de fundo aos botões. Ambos possuem uma posição absoluta em relação aos elementos <a> e ocupam todo o espaço disponível dentro deles. A cor de fundo definida é vermelha (#f00), mas pode ser personalizada conforme necessário. A adição da transição de 0,5 segundos cria um efeito suave quando ocorrerem mudanças nos estilos desses pseudo-elementos, proporcionando uma interação visual agradável ao usuário.
.container a:nth-child(1):before,
.container a:nth-child(1):after {
background: linear-gradient(45deg, #ff075b, #0e1538, #0e1538, #00ccff);
}
Essa regra estiliza os pseudo-elementos ::before e ::after dos primeiros elementos <a> dentro do contêiner com a classe .container. Vamos examinar a propriedade aplicada:
background: linear-gradient(45deg, #ff075b, #0e1538, #0e1538, #00ccff);define um fundo gradiente linear para os pseudo-elementos. O gradiente é composto por quatro cores, aplicadas em um ângulo de 45 graus.
A sequência de cores especificada cria um gradiente que transita de uma tonalidade de rosa (#ff075b) para um tom escuro de azul (#0e1538) e, em seguida, retorna ao mesmo tom escuro de azul antes de transitar para um tom de azul claro (#00ccff). O gradiente é aplicado aos pseudo-elementos ::before e ::after, o que significa que eles terão um fundo com essa transição de cores.
No contexto do código fornecido, essa regra é aplicada apenas aos primeiros elementos <a> dentro do contêiner. Portanto, apenas os primeiros botões terão o fundo estilizado com esse gradiente. Essa é uma técnica comumente usada para diferenciar visualmente o primeiro elemento em uma série ou fornecer um destaque especial a ele.
A pseudo-classe :nth-child(1) é uma seleção CSS que representa o primeiro elemento filho de seu elemento pai. É usada para selecionar elementos com base em sua posição em relação aos seus irmãos dentro do mesmo elemento pai. No caso de :nth-child(1), estamos selecionando o primeiro elemento filho.
.container a:hover:before {
inset: -3px;
}
.container a:hover:after {
inset: -3px;
filter: blur(10px);
}
Essas regras estilizam os pseudo-elementos ::before e ::after dos elementos <a> dentro do contêiner com a classe .container quando o cursor do mouse está em estado de “hover” (quando o mouse passa por cima do elemento). Vamos detalhar cada parte:
.container a:hover:before: Essa regra é aplicada ao pseudo-elemento::beforedos elementos<a>quando eles estão em estado de “hover”. O pseudo-elemento::beforeé estilizado com a propriedadeinset: -3px;, que altera as dimensões do elemento em relação à borda do elemento pai. Nesse caso, um valor de -3 pixels é usado para empurrar o pseudo-elemento para dentro do elemento<a>. Isso cria um efeito de recuo na borda do elemento quando o cursor está sobre ele..container a:hover:after: Essa regra é aplicada ao pseudo-elemento::afterdos elementos<a>quando eles estão em estado de “hover”. O pseudo-elemento::afteré estilizado com as propriedadesinset: -3px;efilter: blur(10px);. A propriedadeinset: -3px;tem o mesmo efeito de recuo que vimos anteriormente, empurrando o pseudo-elemento para dentro do elemento<a>. A propriedadefilter: blur(10px);aplica um desfoque (blur) ao pseudo-elemento, com um valor de 10 pixels. Isso cria um efeito de desfoque suave no pseudo-elemento quando o cursor está sobre ele.
No contexto do código fornecido, essas regras são acionadas quando o usuário passa o mouse sobre os elementos <a>. Elas modificam os pseudo-elementos ::before e ::after para criar efeitos visuais sutis, como o recuo das bordas e o desfoque. Esses efeitos podem fornecer feedback visual e interativo ao usuário, melhorando a experiência de navegação no botão.
.container a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: #0e1538;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
border: 1px solid #040a29;
overflow: hidden;
}
Essa regra estiliza os elementos <span> que estão dentro dos elementos <a> dentro do contêiner com a classe .container. Vamos explicar cada propriedade aplicada:
position: absolute;posiciona o elemento<span>de forma absoluta em relação ao elemento pai. Essa propriedade permite que o elemento seja posicionado em qualquer lugar dentro do contêiner.top: 0; left: 0;define que o elemento<span>esteja posicionado no canto superior esquerdo do elemento pai. Com essas configurações, o elemento<span>ocupará todo o espaço disponível do elemento pai.width: 100%; height: 100%;define que o elemento<span>tenha largura e altura de 100% em relação ao seu elemento pai. Isso garante que o elemento ocupe todo o espaço disponível dentro do elemento pai.display: inline-block;define que o elemento<span>seja exibido como um bloco, mas permitindo que outros elementos apareçam ao lado dele na mesma linha.background: #0e1538;define a cor de fundo do elemento<span>como um tom escuro de azul (#0e1538).z-index: 10;define a ordem de empilhamento do elemento<span>. Um valor maior dez-indexfaria com que o elemento ficasse acima de outros elementos com um valor dez-indexinferior.display: flex; justify-content: center; align-items: center;configura o elemento<span>como um container flexível, alinhando seu conteúdo tanto verticalmente quanto horizontalmente. Isso centraliza o texto dentro do elemento.font-size: 1.2em;define o tamanho da fonte do texto dentro do elemento<span>como 1.2 vezes o tamanho da fonte padrão.text-transform: uppercase;converte o texto dentro do elemento<span>para letras maiúsculas.letter-spacing: 2px;adiciona um espaçamento entre as letras do texto dentro do elemento<span>.color: #fff;define a cor do texto dentro do elemento<span>como branco (#fff).border: 1px solid #040a29;adiciona uma borda ao redor do elemento<span>com espessura de 1 pixel e cor escura (#040a29).overflow: hidden;oculta qualquer conteúdo adicional que possa extrapolar os limites do elemento<span>. Isso garante que qualquer conteúdo que exceda o tamanho do elemento seja recortado e não exibido.
.container a span::before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.075);
transform: skew(25deg);
}
Essa regra estiliza o pseudo-elemento ::before dos elementos <span> que estão dentro dos elementos <a> dentro do contêiner com a classe .container. Vamos explicar cada propriedade aplicada:
content: "";define o conteúdo do pseudo-elemento::beforecomo uma string vazia. Nesse caso, o pseudo-elemento não terá conteúdo textual, mas ainda será gerado como um elemento visual.position: absolute;posiciona o pseudo-elemento::beforede forma absoluta em relação ao elemento<span>pai. Isso permite que o pseudo-elemento seja posicionado independentemente do fluxo normal do documento.top: 0;left: -50px;define a posição do pseudo-elemento::beforeem relação ao seu elemento pai. Nesse caso, o pseudo-elemento será deslocado 50 pixels para a esquerda em relação ao limite do elemento<span>. Isso cria um efeito de sobreposição do pseudo-elemento fora dos limites do elemento pai.width: 100%;height: 100%;define que o pseudo-elemento::beforetenha largura e altura de 100% em relação ao seu elemento pai. Isso faz com que o pseudo-elemento ocupe todo o espaço disponível dentro do elemento<span>.background: rgba(255, 255, 255, 0.075);define a cor de fundo do pseudo-elemento::beforecomo um tom de branco com uma leve transparência. A cor é definida usando a notaçãorgba, que representa os valores de vermelho (255), verde (255), azul (255) e a transparência (0.075).transform: skew(25deg);aplica uma transformação de inclinação ao pseudo-elemento::before. Nesse caso, o pseudo-elemento será inclinado em um ângulo de 25 graus. Isso resulta em uma aparência diagonal para o pseudo-elemento.
No contexto do código fornecido, essa regra cria um pseudo-elemento ::before estilizado que é posicionado fora do elemento <span>. Ele tem uma cor de fundo transparente com uma leve tonalidade branca e é inclinado diagonalmente. Esse efeito adiciona uma camada visual sutil ao elemento <span>, aprimorando seu estilo e aparência geral.
Em resumo, o código HTML e CSS apresentado é utilizado para criar um botão estilizado em uma página da web. O arquivo style.css contém todas as regras de estilo necessárias para personalizar o botão, incluindo cores, tamanhos, posicionamento e efeitos. Ao vincular corretamente o arquivo style.css ao documento HTML, é possível aplicar os estilos desejados ao botão, proporcionando uma experiência visual atraente e interativa para os usuários. A combinação de HTML e CSS oferece flexibilidade e controle sobre a aparência dos elementos da página, permitindo que os desenvolvedores criem botões e outros elementos personalizados de acordo com suas necessidades e preferências.
