Curso de Design Responsivo Aula 16 Criando botões e conhecendo z-index

Nessa vídeo aula vamos aprender como criar e estilizar botões de diferentes tamanhos cores e características, e também conhecer a propriedade z-index uma propriedade muito importante para organização de elementos em nosso projeto.

A propriedade z-index

A propriedade z-index trabalha com um eixo que não é muito conhecido e tampouco usado pela maioria dos desenvolvedores, o eixo Z. O eixo Z é o eixo responsável pelo cálculo e posicionamento da profundidade de algum elemento, ou seja, é aquele que irá determinar se o elemento estará mais próximo ou mais afastado da tela.

Código HTML desenvolvido na vídeo aula

<a href="#" class="botao botaoVerde botaoGrande">Adotar um amigo fiel</a>

Código CSS desenvolvido na vídeo aula

.botao {
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid;
    cursor: pointer;
    color: #99ff99
}
.botaoPequeno {font-size: 0.7em; padding: 3px 8px}
.botaoMedio {font-size: 0.8em; padding: 5px 10px}
.botaoGrande {font-size: 1.1em; padding: 12px 40px}
.botaoVerde { background-color: #00a753; border-color: #006600}
.botaoVerde:hover {
    background-color: #00c161
}

 



Hospedagem Profissional de Sites