Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Arquivos » Lixeira

#1
 Diskete

avatar
Membro
Olá pessoal, trago a vocês um botão novo que eu tive trabalhando, para fazer este botão eu tive a ajuda de uma ferramenta da web, chamada Ultimate CSS Gradient Generator, para poder criar um gradient com estilo css, mas o resto foi eu que fiz. :)
PunBB PhpBB2 PhpBB3 Invision


- > Tutorial < -
-> Botões com estilos modernos <-


1º Passo:

Abra o bloco de notas e insira o código abaixo.

Código:

.input[type="button"] a, input[type="file"] a, input[type="reset"] a, input[type="submit"] a {
background: rgb(234,234,234); /* Old browsers */
background: -moz-linear-gradient(top, rgb(234,234,234) 0%, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(234,234,234)), color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(234,234,234) 0%,rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(234,234,234) 0%,rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(234,234,234) 0%,rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(234,234,234) 0%,rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ }


.input[type="button"]:hover, input[type="file"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
 border: 1px solid #c6c6c6;
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.0s;
  -moz-transition: all 0.0s;
  -ms-transition: all 0.0s;
  -o-transition: all 0.0s;
  transition: all 0.0s;
  background-color: #f8f8f8;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
opacity: 40%;
}

.input[type="button"]:hover, input[type="file"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0
); /* IE6-9 */
opacity: 35%;
}

.input[type="button"], input[type="file"], input[type="reset"], input[type="submit"] {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  color: #444;
  font-size: 11px;
  font-weight: bold;
  height: 27px;
  padding: 0 8px;
  line-height: 27px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -ms-transition: all 0.218s;
  -o-transition: all 0.218s;
  transition: all 0.218s;
  border: 1px solid #dcdcdc;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input[type="button"], input[type="file"], input[type="reset"], input[type="submit"] {
cursor:pointer;
}

.input[type="button"]:hover, input[type="file"]:hover, input[type="reset"]:hover, input[type="submit"]:hover
{    color: white !important;    border: solid 1px #3390CA !important;    background-color: #DDD;    background:-moz-linear-gradient(#B4F6FF,#58B0E7);    background-image: -webkit-linear-gradient(#B4F6FF,#58B0E7);    text-shadow: 0px 1px #388DBE !important;    box-shadow: 0px 1px #E7E7E7 !important;-moz-box-shadow: 0px 1px #E7E7E7 !important;-webkit-box-shadow: 0px 1px #E7E7E7 !important;
opacity: 35%;



2º Passo:

Agora vamos inserir o códigos.

Painel de Controle - > Visualização - > Imagens e Cores - > Cores -> Aba " Folha de estilo CSS "

Insira o código no ínicio ou no meio ou no final do css.

Lembre-se : Para que o código funcione perfeitamente, não pode haver outros códigos similares !



  • Resultado Final:





Desenvolvido por Premotheus | Diskete
Editado e Postado por 2012 © Staffer Group BR™

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#2
 D'Leandro™

avatar
Fundador
Atenção: Por favor indique em quais as versões o código é funcional.

Ver perfil do usuário

#3
 Diskete

avatar
Membro
Ele funciona em todas as versões :)

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#4
 D'Leandro™

avatar
Fundador
Aceito: Movido para o local correspondente.

Ver perfil do usuário

#5
 ~[B]art

avatar
Membro
Bem massa mano, Vlw por compartilhar!
Ver perfil do usuário

#6
 'Fusion

avatar
Membro
gostei desse dexa o fórum mais estiloso gostei muito msm

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#7
 Bookmarlucas654

avatar
Membro
Espero que funcione em todos ;s
Ver perfil do usuário

#8
 D'Leandro™

avatar
Fundador
-------->Tutorial Bloqueado;
Este tutorial foi bloqueado e movido para a lixeira!


Motivo: Conteúdo existente
Link: http://staffergroupbr.stuning.net/t1000-tutorialnovos-botoes-em-estilo-hover#2110
Ver perfil do usuário

#9
 Conteúdo patrocinado