Advertisement
Faysol24

Contact form 7 style, Make it beautiful by css3

Aug 19th, 2017
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.03 KB | None | 0 0
  1. /********** Contact Form 7 Style *************/
  2.  
  3.  
  4. .wpcf7 input[type="text"],
  5. .wpcf7 input[type="email"],
  6. .wpcf7 textarea {
  7.     outline:none;
  8.     display:block;
  9.     width:380px;
  10.     padding:4px 8px;
  11.     border:1px dashed #DBDBDB;
  12.     color:#3F3F3F;
  13.     font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
  14.     font-size:14px;
  15.     /*border-radius*/
  16.     -webkit-border-radius:2px;
  17.     -moz-border-radius:2px;
  18.     border-radius:2px;
  19.     /*transition*/
  20.     -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
  21.     -moz-transition:background 0.2s linear, box-shadow 0.6s linear;
  22.     -o-transition:background 0.2s linear, box-shadow 0.6s linear;
  23.     transition:background 0.2s linear, box-shadow 0.6s linear;
  24. }
  25. .wpcf7 input[type="submit"],
  26. .wpcf7 input[type="button"] {
  27. background-color:#725f4c;
  28. width:100%;
  29. text-align:center;
  30. text-transform:uppercase;
  31. }
  32.  
  33. div#wpcf7-f201-p203-o1{
  34. background-color: #fbefde;
  35. border: 1px solid #f28f27;
  36. padding:20px;
  37. }
  38. #wpcf7-f201-p203-o1 input[type="text"],
  39. #wpcf7-f201-p203-o1 input[type="email"],
  40. #wpcf7-f201-p203-o1 textarea {
  41. background:#725f4c;
  42. color:#FFF;
  43. font-family:lora, "Open Sans", sans-serif;
  44. font-style:italic;    
  45. }
  46. #wpcf7-f201-p203-o1 input[type="submit"],
  47. #wpcf7-f201-p203-o1 input[type="button"] {
  48. background-color:#725f4c;
  49. width:100%;
  50. text-align:center;
  51. text-transform:uppercase;
  52. }
  53.  
  54.  
  55. /* Here comes to good stuff : content styling */
  56. div.wpcf7 {
  57.     position: relative;
  58.     width: 440px;
  59.     z-index: 100;
  60.     padding: 30px !important;
  61.     border: 1px solid #383838;
  62.     background: #D1D1D1;
  63.     background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
  64.     background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
  65.     background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
  66.     background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
  67.     -webkit-border-radius: 8px;
  68.     -moz-border-radius: 8px;
  69.     border-radius: 8px;
  70.     -webkit-box-shadow: 0px 1px 6px #3F3F3F;
  71.     -moz-box-shadow: 0px 1px 6px #3F3F3F;
  72.     box-shadow: 0px 1px 6px #3F3F3F;
  73. }
  74. /** my "fake" background that will hover the stripes **/
  75.  div.wpcf7:after {
  76.     background:#F9F9F9;
  77.     margin:10px;
  78.     position: absolute;
  79.     content :" ";
  80.     bottom: 0;
  81.     left: 0;
  82.     right: 0;
  83.     top: 0;
  84.     z-index: -1;
  85.     border:1px #E5E5E5 solid;
  86.     -webkit-border-radius:8px;
  87.     -moz-border-radius:8px;
  88.     border-radius:8px;
  89. }
  90. /*** form styling **/
  91.  
  92. /** Styling the send button **/
  93.  input[type=submit] {
  94.     cursor:pointer;
  95.     background:none;
  96.     border:none;
  97.     font-family:'Alice', serif;
  98.     color:#767676;
  99.     font-size:18px;
  100.     padding:10px 4px;
  101.     border:1px solid #E0E0E0;
  102.     text-shadow: 0px 1px 1px #E8E8E8;
  103.     background: rgb(247, 247, 247);
  104.     background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
  105.     background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
  106.     background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
  107.     background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
  108.     background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
  109.     background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
  110.     -webkit-border-radius:5px;
  111.     -moz-border-radius:5px;
  112.     border-radius:5px;
  113.     -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
  114.     -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
  115.     box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
  116.     -webkit-transition:all 0.2s linear;
  117.     -moz-transition:all 0.2s linear;
  118.     -o-transition:all 0.2s linear;
  119.     transition:all 0.2s linear;
  120. }
  121. input[type=submit]:hover {
  122.     color:#686868;
  123.     border-color: #CECECE;
  124.     background: rgb(244, 244, 244);
  125.     background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
  126.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
  127.     background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
  128.     background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
  129.     background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
  130.     background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
  131.     -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  132.     -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  133.     box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  134. }
  135. input[type=submit]:active, input[type=submit]:focus {
  136.     position:relative;
  137.     top:1px;
  138.     color:#515151;
  139.     background: rgb(234, 234, 234);
  140.     background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
  141.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
  142.     background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
  143.     background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
  144.     background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
  145.     background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
  146.     -webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  147.     -moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  148.     box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
  149. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement