HTML/CSS Button when clicked changes into input field and submit button [closed]

Question

How would you go about making a clickable button that changes into an <input> field with a <submit> button on my website? Once the button is clicked I want it to slide to the right and then the text input form will come in and be right beside it. I don't know if I should use CSS or JavaScript. Any help?

Answer 1

Demo Fiddle

This isnt perfect, merely a starting point, but a basic premise could be:

HTML

<form>
    <button>Slide In!</button>
    <div>
        <input type='text' />
        <input type='submit' />
    </div>
</form>

CSS

form {
    position:relative;
}
form div {
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    overflow:hidden;
    transition:all 1s ease-in;
}
form div.active {
    left:0;
}

jQuery

$('button').on('click', function (event) {
    event.preventDefault();
    $('form div').addClass('active');
});