Botões

Tamanho

A propriedade “font-size” é usada para se alterar  o tamanho de um botão:

.button{
font-size: 45px;
}

.button{
font-size: 10px;
}

.button{
font-size: 150%;
}

Cor

As cores de um botão podem ser estilizadas assim como uma caixa, usando as propriedades “color” e “background-color”.

.button{
background-color: #e7e7e7; color: red;
}

.button{
background-color: #f44336; color: blue;

.button{
background-color: #555555; color: yellow;
}

Links

Cor, fonte e cor de fundo

Os links de texto podem ser estilizados como um texto comum, podendo ser alterada sua cor, sua fonte, sua cor de fundo, etc.

Estados

Para a formatação de links, podem ser utilizados seletores que determinarão o estilo de acordo com seu estado:

●“a:link”: um link normal, ainda não visitado;

●“a:visited”: um link que já foi visitado pelo usuário;

●“a:hover”: um link quando o usuário passa o cursor do mouse por cima;

●“a:active”: um link no momento em que é clicado;

  Observação: o seletor “a:hover” deve estar depois de “a:link” e “a:visited”. “a:active” deve estar depois de “a:hover”.

Decoração

A propriedade “text-decoration” determina se o link terá seu texto sublinhado.

Formato de botão e outras estilizações

●Os links podem ter suas caixas e textos estilizados de forma que pareçam botões ou tenham as mais diversas aparências.

●A propriedade “cursor” muda a aparência do cursor do mouse caso esteja em cima do link, sendo uma opção na estilização.

Barras de navegação

Barras de navegação são simplesmente uma lista de links, podendo ser estilizadas como listas e links ao mesmo tempo.

●list-style-type => define os marcadores das listas em geral para barras de navegação se usa o estilo “none”

●display => se usado com block deixa a caixa inteira clicável ao invés de apenas o texto.

Hover

Para mudar o estilo quando o usuário passar o mouse por cima do item da barra basta usar o seletor “:hover”.

Barra de navegação Vertical

Para fazer uma barra de navegação vertical basta usar elementos com a tag “<a>”.

●Para que a barra de navegação fique fixa na lateral da página, use a propriedade “position:fixed;”.

Barra de navegação Horizontal

Para fazer uma barra de navegação horizontal, é necessário que a propriedade “display” esteja com o valor “inline”.

Flutuação

A propriedade “float” define se os elementos da barra estarão no lado direito ou esquerdo da página.

●“float:left” para esquerda;

●“float:right” para direita.

○ Obs: essa propriedade pode ser usada dentro da tag de um único elemento da barra para ficar no lado oposto dos outros elementos.

Barra fixa

É usada a mesma propriedade “fixed” para se fixar a barra horizontal, mas pode-se decidir se a barra ficará na parte superior da página com a propriedade “top:0;”, ou na parte inferior, com a propriedade “bottom:0”;

Barra colada

Há também a opção de permitir que a barra se mova na tela e se fixe em algum ponto com a propriedade “position:sticky”.

Exercício

1.Estilize uma barra de navegação vertical com seus elementos do lado direito da tela.

a) mude para o lado esquerdo.

b) deixe a barra fixa na página.

2.Transforme a barra de navegação criada numa barra horizontal na parte superior da página.

a) Mude a barra para a parte inferior da página.

3.Estilize um link para se parecer um botão

Arquivos da aula: https://drive.google.com/drive/folders/11I4q1KZ3qyU-2gd_tm-30bxCeQKehTTB?usp=sharing