<html>
  <head>
    <title>Morphing Input Field Button</title>
  </head>
  
<body>
  
<div class="wrapper">
  
  <div class="middle">

    <h2>Morphing Input Field Button</h2>

    <input type="email" value="" name="EMAIL" class="email-field" id="email-field" placeholder="Tell me more">

    <input type="submit" value="Subscribe" name="subscribe" id="subscribe-button" class="">

  </div>
  
  <footer>
    <p>To see it in full effect go to <a href="https://calebsylvest.github.io/breadbox/">Breadbox</a>.</p>
  </footer>
    
</div><!-- /wrapper -->
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</body> 
  
</html>
body {
	background-color: #f05133;
	color: #efaa9d;
	text-align: center;
	font-family: Lato, Tahoma, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

p a {
  color: #f4f2ca;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255, .2);
	padding: .2em 0;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
}
p a:hover {
	color: #f4f2ca;
	opacity: .6;
}

/* style input field text */
::-webkit-input-placeholder {
   color: #f4f2ca;
   opacity: .8;
}

/* Input field that looks like a button */
.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;
}

/* after button is clicked */
.email-field.active {
	width: 200px;
	outline: none;
	color: #efaa9d;
	text-align: left;
	cursor: inherit;
}

/* Email submit button */
#subscribe-button {
	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; /* for demo only */

	display: none;
}
#subscribe-button:hover {
	opacity: .33;
}

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

/* vertically position everything for effect */
@media screen and (min-width: 480px) {
	
	.middle {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
  }
  
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
// remap jQuery to $
(function($){

	/* trigger when page is ready */
	$(document).ready(function (){
	
		// your functions go here
		$('#email-field').click(function() {
			$(this).addClass("active");
       $(this).attr('placeholder','Email Address...');
			$('#subscribe-button').addClass("show");
		});
	
	});

})(window.jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.