Bootstrap button to animate to input
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a bootstrap button in my page. looks like this. http://screencast.com/t/x8JgjXJRH2r I want the user to click on the button and it to animate nicely to a input box with a submit button to the right of it. Ideally everything keeps this same style. Ideally the animation is cool and css3 driven.

Trying to make this easy and cool for the end user,.

Please provide demo in a fiddle.

awarded to LayZee

Crowdsource coding tasks.

1 Solution

Winning solution

Live example: Bootply (offline)

Live example: jsfiddle

HTML

<div class="container">
    <h1 class="text-center">all your stuff in one place...</h1>

    <div class="air"></div>

    <form class="form-inline">
        <div class="col-sm-offset-4 col-md-offset-5">  
            <div class="form-group is-slideable">
                <button class="btn btn-primary btn-lg js-toggle-state" type="button">Invite me</button>
                <input class="form-control input-lg hideable is-hidden" type="text" name="name" placeholder="Enter your name">
                <button class="btn btn-primary btn-lg hideable is-hidden" type="button">Contact me</button>
            </div>
        </div>
    </form>
</div>

CSS

body {
    background: #9881AF;
    color: #FFF;
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    background: #746487;
    border: none;
    outline: 0;
}

.btn-primary:hover {
    background: #645675;
}

.is-slideable {
    position: relative;
    margin-left: 0;
    -webkit-transition: 0.6s margin-left;
            transition: 0.6s margin-left;
}

.is-slided {
    margin-left: -170px;
}

.hideable.is-hidden {
    opacity: 0;
    -webkit-transition: 0.2s 0s opacity;
            transition: 0.2s 0s opacity;
}

.hideable.is-visible {
    opacity: 1;
    -webkit-transition: 0.3s 0.4s opacity;
            transition: 0.3s 0.4s opacity;
}

JavaScript

$('.js-toggle-state').click(function() {
    $('.is-slideable').toggleClass('is-slided');
    $('.hideable').toggleClass('is-hidden').toggleClass('is-visible');
});
Thanks for the post. Do you mind checking on mobile. It seems to respond with some unintended things. Thx!
Qdev almost 5 years ago
I didn't check mobile, as mobile preview is not available on Bootply. I'll take a look at it in a day and add some media queries to optimize a bit for all platforms.
LayZee almost 5 years ago