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]

avatarT-Lord
Admin


[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 Imagens e Cores Cores 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;
}

- 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;
}

- 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;
}

- 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;
}

- 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;
}

- 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;
}


  • Funciona em quais versões?
    TODAS




© SH-Skins


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"

Ver perfil do usuário http://www.zonetoony.net

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