Shuffle button animation

by Dan Schultz

HTML

<button class="shuffle-button">
    <div class="icon"></div>
    <div class="cover">Shuffle Cover</div>
</button>

CSS

.shuffle-button {
    background-color: grey;
    height: 32px;
    border: none;
    max-width: 150px;
    white-space: nowrap;
    position: relative;
    
    -webkit-transition: max-width 600ms ease, height 600ms ease, color 300ms ease 200ms;
}

.icon {
	width: 32px;
    height: 32px;
    background-color: red;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    -webkit-transition: opacity 200ms ease;
}

.shuffle-button:hover {
    max-width: 48px;
    height: 48px;
    color: rgba(0, 0, 0, 0);
    -webkit-transition: max-width 600ms ease, height 600ms ease, color 300ms ease;
}

.shuffle-button:hover .icon {
    opacity: 1;
    -webkit-transition: opacity 300ms ease 200ms;
}