jaque somos design

CSS3 – Botões com Gradiente

button-preview

Com o CSS3 podemos aplicar o efeito de gradiente nos elementos de html.

  • Puro CSS:  nenhuma imagem ou javascript é usado.
  • O gradiente é cross-browser com suporte (IE, Firefox 3.6, Chrome, Safari).
  • Tamanho Flexivél: podem ser ajustados alterando o tamanho das letras e dos valores de preenchimento.
  • Tem três estados do botão: hover normal, e ativa.
  • Pode ser aplicado a qualquer elemento HTML: a, input, button, span, div, p, h3, etc
  • Retorno: se CSS3 não é suportado, ele irá mostrar um botão regular (sem gradiente e sombra).

Veja alguns exemplos.

Código:

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /* Safari and Chrome */
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);/* Firefox */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');/* IEca */
}

Category: Html

Tagged:

Leave a Reply