Untitled

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<div class="block">

  <h4>Fast registration</h4>

  <p class="block-information">Just type your email and we will register you automatically.</p>

  <form class="block-form">

    <div class="block-form-input">

      <input type="text" placeholder="Email" />

    </div>

    <div class="block-form-submit">

      <input type="submit" value="Continue registration&hellip;" />

    </div>

</form>

  <p><small class="grey block-note-text">At the next step you can type your new password&hellip;</small></p>

</div>

<input type="button" class="showhide" value="Show / Hide&hellip;" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

* {

  box-sizing: border-box;

}

body {

  font: .875em/1.5em "Open Sans", Helvetica, Arial, sans-serif !important;

  padding: 20px;

}

form input {

  vertical-align: top;

}

form {

  font-size: 0;

}

input {

  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;

  line-height: 1.5em;

  margin: 0;

}

input[type="submit"],

input[type="button"] {

  font-size: 13px !important;

}

input[type="text"],

input[type="text"]:focus {

  -webkit-transition: box-shadow .3s;

}

input[type="text"] {

  background: -webkit-linear-gradient(top, #f7f7f7 0%, #fff 10%);

  font-size: 15px;

  line-height: 25px;

  border: 1px solid #ccc;

  padding: 3px 13px;

}

input[type="text"]:focus {

  outline: none;

  box-shadow: 0 0 3px 0 #FFC000;

  border-color: #DDC988;

}

input[type="submit"],

input[type="button"]{

  background: #34B4EF -webkit-linear-gradient(top, #47C1F3 0%, #36B4EE 100%);

  color: #fff;

  padding: 6px 10px;

  border: 1px solid #2A98CA;

  border-top-color: #2E9FD2;

  border-bottom-color: #2892C3;

  border-radius: 2px;

  box-shadow: inset 0 3px 2px -3px #fff,

              inset 0 -2px 12px -10px #023E5A,

                    0 1px 2px rgba(0,0,0,.15);

  text-shadow: 0 1px 0 #2E9FD2;

}

input[type="submit"]:hover,

input[type="button"]:hover{

  background-image: -webkit-linear-gradient(top, #59C8F5 0%, #43B9F0 100%);

  cursor: pointer;

}

input[type="submit"]:active,

input[type="button"]:active{

  background-image: none;

  background-color: #3EBAF0;

  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),

                    0 1px 2px rgba(0,0,0,.15);

  border-color: #2892C3;

}

.grey {

  color: #aaa;

}

.block {

  width: 460px;

  background-image: -webkit-linear-gradient(top, #fff 50%, #F9FDFF 100%);

  padding: 23px;

  margin: 0 0 15px 0;

  border: 1px solid #dfdfdf;

  border-radius: 6px;

  display: block;

  position: relative;

  box-shadow: inset 0 -1px 0 #fff,

                    0  1px 0 rgba(0,0,0,.03);

  -webkit-transform: scale(1,1);

  border-spacing: 0;

}

.block:after,

.block:before {

  width: 0;

  height: 0;

  content: "";

  border: 12px outset transparent;

  border-top: 12px outset #DFDFDF;

  position: absolute;

  bottom: -24px;

  left: 25px;

}

.block:before {

  border-top-color: #F9FDFF;

  bottom: -23px;

  z-index: 100;

}

.block p,

.block h4 {

  margin: 0;

}

.block h4 {

  text-align: center;

  padding-bottom: 20px;

}

.block .block-information {

  margin-bottom: 20px;

}

.block-form {

  width: 100%;

}

.block-form-input,

.block-form-submit {

  display: inline-block;

}

.block-form-input input,

.block-form-submit input {

  width: 100%;

}

.block-form-input {

  width: 60%;

  padding-right: 5px;

}

.block-form-submit {

  width: 40%

}

.block-note-text {

  margin-top: 5px;

  display: inline-block;

  text-shadow: 0 1px 0 #fff;

}

$('.showhide').on('click', function () {

  $('.block').css('border-spacing', '0');

  $('.block').stop().animate(

    { borderSpacing: 1 },

    { step: function (now) {

      $('.block').css('-webkit-transform','scale('+now+','+now+')');

    } }, 1000, 'default');

});