CSS3 Transition: Animate child to 100% width, parent jumps to 100% width instantly

Question

I am trying to create a delete button, that once you click it, expands to show the delete option, so you won't delete anything by mistake. The problem is that the parent container jumps to full size right away while I would like it to grow gradually.

This can be overcome when I set the fixed pixel width for the parent container, but the problem is that I don't always know the width of the contents. Therefor I used a percentage to get it dynamic.

I don't really know how to explain it clearly so I've made a fiddle to show you: http://jsfiddle.net/cgHcP/

HTML:

<div class="right">
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
</div>

CSS:

/* Roll Button */
div.roll-button {
    float: right;
    display: inline;
    position: relative;
    height: 24px;
    width: 24px;
    -webkit-box-shadow: 0 0 0 2px #fff;
    -webkit-border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}

div.roll-button .icon {
    left: 0;
    display: inline;
    position: absolute;
    font-size: 24px;
    width: 24px;
    height: 24px;
    background-color: #ff3e3e;
    -webkit-border-radius: 12px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    line-height: .7;
}

div.roll-button .text {
    float: left;
    display: inline;
    position: relative;
    height: 24px;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    vertical-align: middle;
    line-height: 24px;
    color: #ff3e3e;
    font-weight: 700;
    padding: 0 0 0 24px;
    font-size: 12px;
}

div.roll-button:hover .text {
    padding: 0 5px 0 29px;
}

div.roll-button:hover .icon {
    -webkit-transform: rotateZ(-180deg);
}

div.roll-button:hover {
    width: 100%;
}

.right {
    float: right;
    margin-right: 200px;
}

When you look at the fiddle, you'll notice the parent container (black), jumps to full size when hovered. Even though the child seems to grow gradually. This behavior causes trouble when you put multiple items inline (like in the fiddle, and exactly what I want to do).

I'm, trying to make this button purely with CSS, but this is where I get stuck. Does anyone have a suggestion how this can be done by using purely CSS?

Answer 1

The trick to achieving what you want is using width:auto on the .text and limiting the max-width of it.. the new working jsFiddle

div.roll-button .text {
    width: auto;
    max-width:0px;
}

div.roll-button:hover .text {
    max-width:100px; /* set this to the maximum allowed value.. */
}