<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<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…" />
</div>
</form>
<p><small class="grey block-note-text">At the next step you can type your new password…</small></p>
</div>
<input type="button" class="showhide" value="Show / Hide…" />
<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 {
transition: box-shadow .3s;
}
input[type="text"] {
background: 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 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: 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: 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);
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 () {
$('.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');
});