Início
![[TUTORIAL] Botões de confirmação estilo "incredible" Ecrire10](https://i.servimg.com/u/f66/15/86/37/09/ecrire10.png) | [TUTORIAL] Botões de confirmação estilo "incredible" |
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botões de confirmação estilo "incredible"
[TUTORIAL] Botões de confirmação estilo "incredible"
1º - Onde adicionar os códigos...
Aceda em: Folha de Estilo CSS
Visualização
![[TUTORIAL] Botões de confirmação estilo "incredible" Puce_f10](https://i.servimg.com/u/f42/17/32/13/00/puce_f10.png)
Imagens e Cores Cores Folha De estilo CSSApós adicionar o código com sua cor preferida (ou cor do forúm), Salve!
2º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcm](https://2img.net/r/ihimizer/img690/5109/imgcm.png)
3º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcpi](https://2img.net/r/ihimizer/img62/5325/imgcpi.png)
4º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcmd](https://2img.net/r/ihimizer/img59/6427/imgcmd.png)
5º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcd](https://2img.net/r/ihimizer/img24/6766/imgcd.png)
6º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcx](https://2img.net/r/ihimizer/img843/9893/imgcx.png)
7º - 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;
}
![[TUTORIAL] Botões de confirmação estilo "incredible" Imgcc](https://2img.net/r/ihimizer/img213/6292/imgcc.png)
- Funciona em quais versões?
TODAS
© SH-Skins
![[TUTORIAL] Botões de confirmação estilo "incredible" Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | 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" |
![[TUTORIAL] Botões de confirmação estilo "incredible" Vote_lcap](https://2img.net/i/fa/prosilver_grey/vote_lcap.png){kind=small}
![[TUTORIAL] Botões de confirmação estilo "incredible" Voting_bar](https://2img.net/i/fa/prosilver_grey/voting_bar.png){kind=small}
![[TUTORIAL] Botões de confirmação estilo "incredible" Vote_rcap](https://2img.net/i/fa/prosilver_grey/vote_rcap.png){kind=small}