Javascript/CSS: Change button to a text field on click?
<p>I have a button that I need to change into a text field (Ideally expand into it using an animation) when clicked. Right now I have my button and text field beside each other on the page:</p>

<pre><code>echo '&lt;form id= "changePassForm" action="" method="post" enctype="multipart/form-data"&gt;';  
echo '&lt;div class="changePass"&gt;Change Password&lt;/div&gt;';
echo '&lt;div class="changePassBtn" method="post"&gt;&lt;/div&gt;';
echo '&lt;input type="password" placeholder="Password" name="password"&gt;';
echo '&lt;/form&gt;';  
</code></pre>

<p>I can set the password to hidden at start but I need to know how to make the changePass button "become" or expand into the password text field either using CSS or javascript. 
I'm new to javascript and am unsure how to accomplish this on button click. </p>

<p>How can I change a button to a text field on click? I need to be able to change back to the button afterwards</p>

<p>I'm getting this:
<a href="https://i.stack.imgur.com/Ba8Ki.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ba8Ki.png" alt="enter image description here"></a></p>

<p>With this:</p>

<pre><code>echo '&lt;form id="changePassForm" action="" method="post" enctype="multipart/form-data"&gt;
  &lt;div class="changePass"&gt;
    &lt;div class="changePassBtn"&gt;Change Password&lt;/div&gt;
    &lt;input type="password" placeholder="Password" name="password"&gt;
  &lt;/div&gt;';
</code></pre>

<p>And </p>

<pre><code>    .wrapper {
        background: #50a3a2;
        background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
        background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
        position: absolute;
        top: 0%;
        left: 0;
        width: 100%;
        height: 100%;
        margin-top: 0px;
        overflow: scroll;
        z-index: -1;
        text-align: center;
    }
.changePass {
  position: relative;
  width: 200px;
  height: 1px;
}

.changePass input {
  position: absolute;
  padding: 5px;
  display: none;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

}

.changePass, .changePassBtn {
  background: #2d89ef;
  border-bottom: 2px solid #2b5797;
  color: white;
  padding: 4px;
  display: inline;
  border-radius: 2px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
}

.changePass, .changePassBtn:hover {
  background: #2b5797;
  border-top: 2px solid #2d89ef;
  border-bottom: 0;
}
</code></pre>

<p>Even when I take it out of the wrapper entirely your colors do not come through. Why is this happening?</p>