Como criar botões Basicos em HTML

Alquimista

Alquimista

Coordenador

Postagens : 76

Troféus : 0

Registrado em : 15/07/2014

Como criar botões Basicos em HTML

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Uma breve introdução ao CSS:
CSS (cascading style sheet) é usado para adicionar estilos aos seus websites onde torna muito mais fácil a sua modificação de estilo completo mudando apenas um estilo no bloco de css.

Como adicionar estilos a sua página:
Para adicionar estilos a sua página há varios modos, mas agora só irei mostrar um porque o tutorial não se trata disso.

Crie a seguinte página html:

Código:: <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="botoes.css" /> <title>Botões em HTML/CSS</title> </head> <body> </body> </html>

Obs:
No lugar de href="botoes.css" coloque o local do seu arquivo .css

Agora vamos adicionar um pouco de marcação ao nosso html:

Código:: <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="botoes.css" /> <title>Botões em HTML/CSS</title> </head> <body> <div id="menu"> <a href="#">Home</a><a href="#">Downloads</a><a href="#">Vídeos</a><a href="#">Fale conosco</a> </div></body> </html>

Essas "div's" são como marcadores para um pedaço específico da sua página.
O id="menu" é o nome próprio da nossa div.

Como assim nome próprio?
Quando se tem um nome próprio você é o unico a telo, e ninguém mais no mundo pode usalo.
E isso torna a nosso div unica, ou seja não vai esistir mais nehuma div com o mesmo nome.

ID != CLASS
CLASS - muitas
ID - unico

Pronto agora vamos ao CSS:
Crie um novo documento de texto e coloque o seguinte conteúdo dentro dele:

Código:: #menu a:link { text-decoration: none; margin-right: 2px; height: 31px; width: 41px; background-color: #333; color: #CCC; border: 1px solid #888; }

Vamos entender isso agora:
#menu a:link - Todo link que estiver dentro da div menu tera os seguintes estilos.
text-decoration: none - Com esse comando conseguimos retirar aquele sublinhado que sempre vem com o link.
margin-left - Iso cria uma margem a direita do link para separalos um pouco.
height/width - Dfine a autura e largura do documento.
background-color - Dfine a cor de fundo do objeto.
color - Define a cor do objeto.
border - Adciona uma borda ao objeto no caso : 1px de largura / solida / cor #888.

Isso já é bom mais não o bastante.

Agora o resto do css:

Código:: #menu a:link { text-decoration: none; margin-right: 2px; height: 31px; width: 41px; background-color: #333; color: #CCC; border: 1px solid #888; } #menu a:hover { text-decoration: underline; margin-right: 2px; height: 31px; width: 41px; background-color: #CCC; color: #333; border: 1px solid #888; } #menu a:active { text-decoration: none; margin-right: 2px; height: 31px; width: 41px; background-color: #888; color: #CCC; border: 1px solid #333; } #menu a:visited { text-decoration: underline; margin-right: 2px; height: 31px; width: 41px; background-color: #333; color: #CCC; border: 1px solid #000; }