Paulo Soreto escreveu:
- Spoiler:
Tipo da Linguagem: Css
Engine: Sei lah... Dreanweaver?
Tipo do Projeto: Fórum RPG (não é muito popular mais é legal).
Nome do Sistema: Css para botões
Descrição: Queria uma css para personalizar os botões de fóruns, por exemplo, os botões da aldeia (da caixa de resposta rápida) são quadrados, queria uma css para personaliza eles, deixa-los com os cantos arredondados e quando passasse o mouse por cima, as bordas ficarem mais azuladas.
Entrega:
- Código:
.Botao {
-webkit-border-radius: 10px;
width:150px;
height:30px;
}
.Botao:hover {
-webkit-border-radius: 10px;
background-color:#06F;
border:2px #000 solid;
width:150px;
height:30px;
}
Eu criei o a forma de arredondar as bordas em CSS 3 , é apenas o código "-webkit-border-radius: 10px;" 10px é o tamanho em que as bordas serão arredondadas!
A Segunda classe acompanha o código ":hover" ele serve para quando o mouse estiver sobre o botão ele possa mudar a cor de acordo com o que você queira, usei o Azul como exemplo, Border 2px com a cor Preta solida é justamente a cor da borda que irá mudar ao passar o mouse por cima.
Para adicionar no HTML use como uma classe, pôs eu usei o "." e ele é reconhecido como uma classe do CSS, use o +/- assim para adicionar!
- Código:
<input type="submit" class="Botao" value="Enviar" >
Lembrando que o Limite do "-webkit-border-radius: 10px;" é 20px e fica bem arredondado!
Última edição por Nietore em Ter Nov 29, 2011 7:18 pm, editado 1 vez(es)