Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

RMBR

avatar
Administrador

[Você precisa estar registrado e conectado para ver esta imagem.]

[TUTORIAL] Botões de confirmação estilo "incredible"

Botões de confirmação estilo "incredible" em várias cores ;D


--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botões de confirmação estilo "incredible"


- Onde adicionar os códigos...
Aceda em: Folha de Estilo CSS

Visualização [Você precisa estar registrado e conectado para ver esta imagem.] Imagens e Cores [Você precisa estar registrado e conectado para ver esta imagem.] Cores [Você precisa estar registrado e conectado para ver esta imagem.] Folha De estilo CSS


Após adicionar o código com sua cor preferida (ou cor do forúm), Salve!

- Botão Vermelho
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
  transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
      -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
   -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
   box-shadow:inset 0px 1px 0px 0px #f5978e;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
   background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
   background-color:#f24537;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #d02718;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:1px 1px 0px #810e05;
 
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
  transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
   background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
   background-color:#c62d1f;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

- Botão Azul
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
.classname {
   -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
   -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
   box-shadow:inset 0px 1px 0px 0px #bbdaf7;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
   background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
   background-color:#79bbff;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #84bbf3;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:2px 1px 1px #528ecc;
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
   background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
   background-color:#378de5;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

- Botão Laranja
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
   -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
   -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
   box-shadow:inset 0px 1px 0px 0px #fce2c1;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
   background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
   background-color:#ffc477;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #eeb44f;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:2px 1px 1px #cc9f52;
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
   background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
   background-color:#fb9e25;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

- Botão Verde
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
   -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
   -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
   box-shadow:inset 0px 1px 0px 0px #caefab;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
   background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
   background-color:#77d42a;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #268a16;
   display:inline-block;
   color:#306108;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:2px 1px 1px #aade7c;
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
   background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
   background-color:#5cb811;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

- Botão Roxo
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
   -moz-box-shadow:inset 0px 1px 0px 0px #e6cafc;
   -webkit-box-shadow:inset 0px 1px 0px 0px #e6cafc;
   box-shadow:inset 0px 1px 0px 0px #e6cafc;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c579ff), color-stop(1, #a341ee) );
   background:-moz-linear-gradient( center top, #c579ff 5%, #a341ee 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c579ff', endColorstr='#a341ee');
   background-color:#c579ff;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #a946f5;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:2px 1px 1px #8628ce;
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a341ee), color-stop(1, #c579ff) );
   background:-moz-linear-gradient( center top, #a341ee 5%, #c579ff 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a341ee', endColorstr='#c579ff');
   background-color:#a341ee;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

- Botão Cinza
Spoiler:
Código:
input.button2[value="Pré-visualizar"],input.button2[value="Enviar"]{
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
   box-shadow:inset 0px 1px 0px 0px #ffffff;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
   background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
   background-color:#f9f9f9;
   -moz-border-radius:7px;
   -webkit-border-radius:7px;
   border-radius:7px;
   border:1px solid #dcdcdc;
   display:inline-block;
   color:#666666;
   font-family:arial;
   font-size:16px;
   font-weight:bold;
   padding:6px 9px;
   text-decoration:none;
   text-shadow:2px 1px 1px #ffffff;
}
input.button2[value="Pré-visualizar"]:hover, input.button2[value="Enviar"]:hover{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
   background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
   background-color:#e9e9e9;
}
input.button2[value="Pré-visualizar"]:focus, input.button2[value="Enviar"]:focus{
position:relative;
   top:1px;
}
[Você precisa estar registrado e conectado para ver esta imagem.]

  • Funciona em quais versões?
    TODAS




© RMBR & SPDESIGN


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Botões de confirmação estilo "incredible"

http://rmbr.forumeiros.com

Arikarindokuta

avatar
Iniciante
gostaria de pedir uma coisa vcs poderiam me fornecer o botão cinza sem nada escrito ?



[Você precisa estar registrado e conectado para ver esta imagem.]

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum