Formulário de contato 7 style, Make it Beautiful by CSS3
Publicados: 2017-08-21O formulário de contato 7 é o plugin mais popular e fácil de usar para todos os sites wordpress. Então, toda vez que temos que customizar o CSS para torná-lo agradável. Mas é demorado e chato criar estilo todas as vezes para cada projeto.
Então aqui está um estilo muito fácil e pronto para usar para o formulário de contato 7 usando css3.
/************ Formulário de contato 7 Estilo ************/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 área de texto {
contorno: nenhum;
exibição: bloco;
largura: 380px;
preenchimento: 4px 8px;
border:1px tracejado #DBDBDB;
cor:#3F3F3F;
font-family: 'Droid Sans', Tahoma, Arial, Verdana sem serifa;
tamanho da fonte: 14px;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
raio da borda:2px;
/*transição*/
-webkit-transition:fundo 0.2s linear, box-shadow 0.6s linear;
-moz-transition:fundo 0.2s linear, box-shadow 0.6s linear;
-o-transição:fundo 0,2s linear, sombra da caixa 0,6s linear;
transição:fundo 0,2s linear, sombra da caixa 0,6s linear;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
cor de fundo:#725f4c;
largura: 100%;
text-align:center;
transformação de texto:maiúsculas;
}
div#wpcf7-f201-p203-o1{
cor de fundo: #fbefde;
borda: 1px sólido #f28f27;
preenchimento: 20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 área de texto {
fundo:#725f4c;
cor:#FFF;
font-family:lora, "Open Sans", sans-serif;
estilo da fonte: itálico;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
cor de fundo:#725f4c;
largura: 100%;
text-align:center;
transformação de texto:maiúsculas;
}
div.wpcf7 {
posição: relativa;
largura: 440px;
índice z: 100;
preenchimento: 30px !importante;
borda: 1px sólido #383838;
fundo: #D1D1D1;
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
raio da borda: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
div.wpcf7:depois de {
fundo:#F9F9F9;
margem:10px;
posição: absoluta;
contente :" ";
inferior: 0;
esquerda: 0;
direita: 0;
topo: 0;
índice z: -1;
borda: 1px #E5E5E5 sólido;
-webkit-border-radius:8px;
-moz-border-radius:8px;
raio da borda:8px;
}
entrada[tipo=enviar] {
cursor:ponteiro;
fundo: nenhum;
borda: nenhuma;
font-family:'Alice', serifa;
cor:#767676;
tamanho da fonte: 18px;
preenchimento: 10px 4px;
borda: 1px sólido #E0E0E0;
sombra de texto: 0px 1px 1px #E8E8E8;
fundo: rgb(247, 247, 247);
fundo: -moz-linear-gradient(topo, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, superior esquerdo, inferior esquerdo, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundo: -webkit-linear-gradient(topo, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundo: -o-linear-gradient(topo, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundo: -ms-linear-gradient(topo, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
fundo: gradiente linear(topo, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-border-radius:5px;
-moz-border-radius:5px;
raio da borda:5px;
-webkit-box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #EAEAEA;
-transição do webkit:todos os 0,2s lineares;
-moz-transição:todos os 0,2s lineares;
-o-transição: todos os 0,2s lineares;
transição:todos 0,2s lineares;
}
input[type=submit]:hover {
cor:#686868;
cor da borda: #CECECE;
fundo: rgb(244, 244, 244);
fundo: -moz-linear-gradient(topo, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, superior esquerdo, inferior esquerdo, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundo: -webkit-linear-gradient(topo, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: -o-linear-gradient(topo, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: -ms-linear-gradient(topo, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: gradiente linear(topo, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
posição: relativa;
topo:1px;
cor:#515151;
fundo: rgb(234, 234, 234);
fundo: -moz-linear-gradient(topo, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, superior esquerdo, inferior esquerdo, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
fundo: -webkit-linear-gradient(topo, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: -o-linear-gradient(topo, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: -ms-linear-gradient(topo, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
fundo: gradiente linear(topo, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inserido, 0 0 0px 5px #E0E0E0;
}