Como criar botões básicos em HTML/CSS

**Schintzel** · 19 de Fevereiro 2010

Bom gente aqui irei mostrar como criar botões básicos em HTML/CSS, espero que ajude.

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:

<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:

<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:

#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:

#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;

}

Pronto,agora temos um botão.

Obs:

#menu a:hover = Quando você passar o mouse acima do objeto,alterará seu estilo.

#menu a:active = Quando você clicar no objeto,alterará seu estilo.

#menu a:visited = Quando o link já tiver sido visitado ele ficara com o estilo adicionado.

Se te ajudei, agradeça.

Qualquer dúvida/sugestão poste aqui, que estarei atualizando esse tópico sempre que possivel.

GuiMor · 20 de Fevereiro 2010

Gostei

Bem legal o topico gostei.

Levou meu THANKS

Entrar

Quem está por aqui 0 membros estão online

Como criar botões básicos em HTML/CSS

Posts Recomendados

Schintzel 0

Link para o comentário

Compartilhar em outros sites

GuiMor 0

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante