CSS or JS transition for button that changes size from text changes?

Question

I have an Angular app with a button that has a label of "+"

On mouse-over I call element.append(' Add a New Number'); This adds that text new to the + in the label.

Use clicks the button, new number is added, label of button is returned to "+"

I would like to animate the button size change and/or the txt label change. So far, just adding a css transition to width does nothing.

Thoughts?

UPDATE: To help clarify, this is a bootstrap input group button. I don't want to set widths or css transforms, to avoid breaking the group either here or at other screen sizes.

here are the 2 states:

I was simply letting the existing button stretch due to the injection of more words.

Answer 1

I am probably guessing you don't have a predefined width. anyways you could use transform-origin and scale to achieve such an effect

FIDDLE HERE

HTML:

<button id="btn">Click</button>

CSS:

#btn {
    outline: none;
    border:none;
    background: orange;
    padding: 1em 1.5em;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
#btn:hover {
    -webkit-transform: scaleX(1.2);
    -ms-transform: scaleX(1.2);
    -o-transform: scaleX(1.2);
    transform: scaleX(1.2);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
}

you should use CSS transforms for animations rather than a property like width. The animation is slightly jerky , so you might want to work on it a bit more.