CODEWITHSUNDEEP
csscss-transitions
Alexey Kosov
Alexey Kosov

Reputation: 3128

CSS transition slide right

I need to add a CSS transition to this code to have the button's width changes smoothly on hover, but I can't make it work.

http://jsfiddle.net/AlexeyKosov/fa9c6nfc/1/

HTML:

<button class="btn btn-default">
    <span class="fa fa-check"></span>
    <span class="caption">Button text</span>
</button>

CSS:

.btn .caption {
    display: none;
}
.btn:hover .caption {
    display: inline;
}

Upvotes: 1

Views: 775

Answers (1)

Victor
Victor

Reputation: 1041

You should use max-width for this.

.btn .caption {
    max-width: 0px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s linear;
}
.btn:hover .caption {
    max-width: 999px;
}

http://jsfiddle.net/fa9c6nfc/2/

Upvotes: 1

Related Questions