.form {
                  margin: auto;
                  width: 400px;
                  padding: 20px 30px;
                  /*background: #fff;*/
                  border: 1px solid #dfdfdf;
                  -webkit-transform-style: preserve-3d;
                          transform-style: preserve-3d;
                  -webkit-perspective-origin: 50px center;
                          perspective-origin: 50px center;
                  -webkit-perspective: 2000px;
                          perspective: 2000px;
                  transition: -webkit-transform 1s ease;
                  transition: transform 1s ease;
                  transition: transform 1s ease, -webkit-transform 1s ease;
                }

          .field {
                  position: relative;
                  background: #cfcfcf;
                  -webkit-transform-style: preserve-3d;
                          transform-style: preserve-3d;
                }

          .field + .field {
                             margin-top: 10px;
                           }

         .input {
                  border: 1px solid #dfdfdf;
                  background: #fff;
                  height: 48px;
                  line-height: 48px;
                  padding: 0 10px 0 48px;
                  width: 85%;
                  -webkit-transform: translateZ(26px);
                          transform: translateZ(26px);
                }

          .button {
              border-style: none;
    border-color: inherit;
    border-width: 0;
    display: block;
              width: 100%;
              text-align: center;
              font-weight: bold;
              color: #fff;
              background: linear-gradient(45deg,#3365AD, #B0C7E8);
              margin-top: 20px;
              padding: 14px;
              position: relative;
    top: 5px;
    left: 0px;
    height: 45px;
}

          .button:hover {
                      -webkit-transform: translateZ(13px);
                              transform: translateZ(13px);
                    }
         
          .icon {
                  width: 24px;
                  height: 24px;
                  position: absolute;
                  top: calc(50% - 12px);
                  left: 12px;
                  -webkit-transform: translateZ(50px);
                          transform: translateZ(50px);
                  -webkit-transform-style: preserve-3d;
                          transform-style: preserve-3d;
                }
           .icon::before, .icon::after {
                  content: "";
                  display: block;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
            .icon::after {
              -webkit-transform: translateZ(-23px);
                      transform: translateZ(-23px);
              opacity: 0.5;
            }


      .email .icon::before, .email .icon::after {
              background: url(https://image.flaticon.com/icons/svg/131/131040.svg) center/contain no-repeat;
            }

      .password .icon::before, .password .icon::after {
                      background: url(https://image.flaticon.com/icons/svg/130/130996.svg) center/contain no-repeat;
                    }

            input:active, input:focus, button:active, button:focus {
              outline: none;
              border: 1px solid #3365AD;
            }