Превращение кнопки в два поля ввода?

Question

[Сергей]

Здравствуйте, появилась потребность в создании системы входа, так вот, хочу сделать это красиво, только вот никак не могу понять как превратить кнопку в два поля для ввода, есть какие идеи?
У меня есть код, примерно так я и хочу сделать форму входа, только вот там не хватает второго поля...

html:

<div class="middle">

    <input type="email" value="" name="EMAIL" class="email-field" id="email-field" placeholder="Войти!">

    <input type="submit" value="next" name="next" id="nextbtn" class="">

  </div>

js:

(function($){
	$(document).ready(function (){

	$('#email-field').click(function() {
		$(this).addClass("active");
    	$(this).attr('placeholder','Ваш E-mail');
			$('#nextbtn').addClass("show");
		});	
	});
})(window.jQuery);

css:

body {
	background: #f05133;
	color: #efaa9d;
	text-align: center;
}

.email-field {
	width: 80px;
	display: inline-block;
	color: #f4f2ca;
	text-align: center;
	background-color: #d8492e;
	padding: .9em 1.8em;
	border: none;
	cursor: pointer;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
}
.email-field:hover {
	background-color: #d0432a;
}

.email-field.active {
	width: 200px;
	outline: none;
	color: #efaa9d;
	text-align: left;
	cursor: inherit;
}

#nextbtn{
	width: 35px;
	height: 35px;
	border: none;
	text-indent: -9999px;
  opacity: .25;
	background: url(http://helixpowered.com/assets/img/arrow-circle-on-right.svg) no-repeat;
	background-size: 13px;
	background-position: 0 1px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;  
	cursor: pointer;
	display: none;
}
#nextbtn:hover {
	opacity: .33;
}

#nextbtn.show {
	display: inline-block;
	background-size: 33px;
}

	
.middle {
	width: 100%;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

Заранее спасибо за помощь!

Answer 1

[RAX7]