Alguém pode dar um exemplo de como estilizar um botão chamativo de forma que ele fique centralizado na página e que pareça estar com luz em volta? Como posso fazer isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém pode dar um exemplo de como estilizar um botão chamativo de forma que ele fique centralizado na página e que pareça estar com luz em volta? Como posso fazer isso?
Opa Luís! Tudo bem contigo?
Posso sim! Primeiro vamos separar os arquivos em 2!
Vamos separar o HTML e o CSS em arquivos diferentes para uma melhor organização. Vamos criar dois arquivos, um para o HTML (index.html) e outro para o CSS (style.css). Além disso, vou fornecer uma explicação mais detalhada do código.
index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Botão Chamativo</title>
</head>
<body>
<a href="#" class="chamativo-btn">Clique Aqui</a>
</body>
</html>
style.css:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0; /* Cor de fundo da página */
}
.chamativo-btn {
display: inline-block;
padding: 15px 30px;
font-size: 16px;
text-align: center;
text-decoration: none;
border: 2px solid #ffffff; /* Cor da borda do botão */
border-radius: 5px;
background-color: #3498db; /* Cor de fundo do botão */
color: #ffffff; /* Cor do texto do botão */
position: relative;
overflow: hidden;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.chamativo-btn:hover {
background-color: #2980b9; /* Cor de fundo do botão ao passar o mouse */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Efeito de luz ao redor do botão */
}
HTML (index.html):
<head> contém as informações do documento, como o conjunto de caracteres, a viewport e um link para o arquivo de estilo CSS.<body> contém o conteúdo da página, que neste caso é um link (<a>) com a classe chamativo-btn.<link rel="stylesheet" href="style.css">.CSS (style.css):
body define propriedades para o corpo da página, centralizando o conteúdo e definindo a cor de fundo..chamativo-btn define as propriedades do botão, como tamanho, cores, borda e efeitos de transição.:hover é usada para definir o estilo quando o mouse está sobre o botão, alterando a cor de fundo e adicionando um efeito de luz usando box-shadow.A organização em arquivos separados facilita a manutenção e a leitura do código, especialmente em projetos maiores. Certifique-se de manter ambos os arquivos no mesmo diretório para que o HTML possa referenciar o arquivo CSS corretamente.
Nesse caso eu optei por cores mais discretas e mantive a fonte padrão do navegador mesmo, mas no seu projeto você pode aumentar ou diminuir o espaçamento interno e esterno do botão, você pode também trocar as cores geradas ao passar o mouse por cima na propriedade background-color do seletor :hover.
E se quiser aumentar a "Luz" em volta dele, que no caso é a borda, mude os pixels do tamanho da borda nessa propriedade border: 5px solid #ffffff;, mude o 5px por 10px, ou 15px, ou o que quiser. A cor também pode ser mudada ao substituir esse hexadecimal aqui: #ffffff´. E sobre o arredondado da borda você pode deixar ela mais arredondada ou menos com o valor dessa propriedade aqui: border-radius: 5px;.
Vou deixar alguns links que acho que podem lhe ajudar abaixo:
Era isso, se precisar eu estarei para ajudar em caso de dúvidas ou se o que você precisava era outra coisa.
Abraços e bons estudos.
Muito obrigado! Explicação bem completa Renan! Me ajuda demais! Valeu.
Imagina, precisando é só falar!
Abraços e bons estudos.