Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div ou botão com estilo usando CSS

21-05-2013 04:57

Vou passar aqui uma dica para ter um botão ou div parecendo botão com estilo no seu site, usando CSS.

Para o botão, você vai precisar de duas cores, uma para fundo do botão, e outra para borda.

Nessa dica, vou assumir que para o fundo botão, vai ser usado uma cor escura, então o texto para o botão será branco e a sombra escura.

Quando escolher a cor, escolha a mesma cor, com duas tonalidades diferentes, uma mais clara e uma mais escura.
Tabela de cores: http://html-color-codes.info/

Primeiro, você vai precisar desse CSS, já está todo comentado a função de cada linha

.bonito { border-radius: 2px; /* arredondamento da borda */ display: inline-block; /* modo do mostragem */ font-family: "tahoma"; /* tipo da fonte */ font-size: 12px; /* tamanho da fonte */ font-weight: 700; /* peso da fonte */ padding: 6px 24px; /* espaçamento em relação ao elemento */ text-decoration: none; /* eliminando o underline */ text-shadow: 1px 1px 0px #111; /* sombra para o texto */ cursor: pointer; /* tipo do cursor sobre o texto */ }

Esse estilo .bonito é padrão, ou seja, todos os botões vão ter ele.

Agora, vou criar uma class exclusiva para cor azul, que vai complementar o estilo acima

.bonito.azul{ color:#fff; /* cor do texto */ background-color: #2daebf; /* cor de fundo */ border: 1px solid #007d9a; /* cor da borda */ box-shadow: inset 0px 1px 0px 0px #007d9a; /* cor da sobra da caixa */ }

Nesse estilo acima, você vai precisar das duas cores que citei acima, uma só o fundo, e outra para a borda e para a sombra da caixa.

Você pode alterar qualquer cor se quiser. Também pode criar outras class para aplicar em vários elementos, tipo, .bonito.verde, .bonito.laranja e por ai vai.

O estilo você pode usar em div, span, input button, entre outros, exemplo

<div class="bonito azul">algo</div> <input type="button" class="bonito azul" value="algo">

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado