Formulir kontak 7 gaya, Jadikan Cantik oleh CSS3
Diterbitkan: 2017-08-21Formulir kontak 7 adalah plugin paling populer yang mudah digunakan untuk semua situs web wordpress. Jadi setiap kali kita harus menyesuaikan css untuk membuatnya bagus. Tapi itu memakan waktu dan menjengkelkan untuk menciptakan gaya setiap kali untuk setiap proyek.
Jadi di sini sangat mudah dan siap untuk menggunakan gaya untuk formulir kontak 7 menggunakan css3.
/********** Formulir Kontak 7 Gaya *************/
.wpcf7 masukan[type="teks"],
.wpcf7 masukan[type="email"],
.wpcf7 textarea {
garis besar: tidak ada;
tampilan: blok;
lebar:380px;
bantalan: 4px 8px;
perbatasan:1px putus-putus #DBDBDB;
warna:#3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
ukuran font: 14px;
/*batas-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
batas-radius:2px;
/*transisi*/
-webkit-transition:latar belakang 0.2s linier, kotak-bayangan 0.6s linier;
-moz-transition:latar belakang 0.2s linier, kotak-bayangan 0.6s linier;
-o-transisi: latar belakang 0,2 detik linier, bayangan kotak 0,6 detik linier;
transisi:latar belakang 0.2 dtk linier, bayangan kotak 0,6 dtk linier;
}
.wpcf7 masukan[type="kirim"],
.wpcf7 masukan[type="button"] {
warna latar:#725f4c;
lebar: 100%;
perataan teks:pusat;
transformasi teks:huruf besar;
}
div#wpcf7-f201-p203-o1{
warna latar: #fbefde;
perbatasan: 1px solid #f28f27;
bantalan: 20 piksel;
}
#wpcf7-f201-p203-o1 masukan[type="text"],
#wpcf7-f201-p203-o1 masukan[type="email"],
#wpcf7-f201-p203-o1 textarea {
latar belakang:#725f4c;
warna:#FFF;
font-family:lora, "Buka Sans", sans-serif;
font-style:italic;
}
#wpcf7-f201-p203-o1 masukan[type="kirim"],
#wpcf7-f201-p203-o1 masukan[type="button"] {
warna latar:#725f4c;
lebar: 100%;
perataan teks:pusat;
transformasi teks:huruf besar;
}
div.wpcf7 {
posisi: relatif;
lebar: 440 piksel;
indeks-z: 100;
bantalan: 30px !penting;
perbatasan: 1px solid #383838;
latar belakang: #D1D1D1;
latar belakang: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
latar belakang: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
latar belakang: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
latar belakang: 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;
batas-radius: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
kotak-bayangan: 0px 1px 6px #3F3F3F;
}
div.wpcf7:setelah {
latar belakang:#F9F9F9;
margin:10px;
posisi: mutlak;
isi :" ";
bawah: 0;
kiri: 0;
kanan: 0;
atas: 0;
indeks-z: -1;
perbatasan:1px #E5E5E5 padat;
-webkit-border-radius:8px;
-moz-border-radius:8px;
batas-radius:8px;
}
masukan[jenis=kirim] {
kursor: penunjuk;
latar belakang: tidak ada;
batas: tidak ada;
font-family:'Alice', serif;
warna:#767676;
ukuran font:18px;
bantalan:10px 4px;
perbatasan:1px padat #E0E0E0;
teks-bayangan: 0px 1px 1px #E8E8E8;
latar belakang: rgb(247, 247, 247);
latar belakang: -moz-linear-gradient(atas, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
latar belakang: -webkit-gradient(linier, kiri atas, kiri bawah, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
latar belakang: -webkit-linear-gradient(atas, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
latar belakang: -o-linear-gradient(atas, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
latar belakang: -ms-linear-gradient(atas, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
latar belakang: gradien linier (atas, rgba (247, 247, 247, 1) 1%, rgba (242, 242, 242, 1) 100%);
-webkit-border-radius:5px;
-moz-border-radius:5px;
batas-radius:5px;
-webkit-box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #EAEAEA;
-webkit-transisi: semua 0.2s linier;
-moz-transisi: semua 0.2s linier;
-o-transisi: semua 0.2s linier;
transisi: semua 0,2 detik linier;
}
masukan[jenis=kirim]:arahkan {
warna:#686868;
warna batas: #CECECE;
latar belakang: rgb(244, 244, 244);
latar belakang: -moz-linear-gradient(atas, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -webkit-gradient(linier, kiri atas, kiri bawah, color-stop (0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1 )));
latar belakang: -webkit-linear-gradient(atas, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -o-linear-gradient(atas, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -ms-linear-gradient(atas, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: gradien linier (atas, rgba (244, 244, 244, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
}
masukan[jenis=kirim]:aktif, masukan[jenis=kirim]:fokus {
posisi: relatif;
atas:1px;
warna:#515151;
latar belakang: rgb(234, 234, 234);
latar belakang: -moz-linear-gradient(atas, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -webkit-gradient(linier, kiri atas, kiri bawah, color-stop (0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1) )));
latar belakang: -webkit-linear-gradient(atas, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -o-linear-gradient(atas, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: -ms-linear-gradient(atas, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
latar belakang: gradien linier (atas, rgba (234, 234, 234, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0;
}