CSS - Expand button width smoothly and display text on hover

I was trying to make a button animation on hover states where initial state the button will show with an icon only and after hover on it will expand the width and then display the text inside of it.

I can't add predefined max-width or width or width value as I don't know what would be the length of the text as is rendered from a back end service

I had added some CSS code on it but it's not working properly. The flow what I need like -

1. Initial state display button with icon
2. After hovering the width of the button will expand up to the text length
3. Then show the text inside the button

.sti_container{ position: relative; } .btn{ position: relative; display: inline-block; padding: 15px; background-color: blue; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; color: #fff; border-radius: 25px; -webkit-transition: width 0.5s; transition: width 0.5s; } .btn .btn-text{ width: 0; display: inline-block; -webkit-transition: color 2s; transition: color 2s; vertical-align: top; white-space: nowrap; overflow: hidden; color: blue; } .btn:hover .btn-text{ width: auto; color: white; }

<link href="" rel="stylesheet"/> <div> <button> <span><i aria-hidden="true"></i></span> <span>Shop the image here to click and open</span> </button> </div>

1 Answer

Width auto values can't be animated, so use max-width instead:

.sti_container { position: relative; } .btn { position: relative; display: inline-block; padding: 15px; background-color: blue; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; color: #fff; border-radius: 25px; -webkit-transition: width 0.5s; transition: width 0.5s; } .btn .btn-text { max-width: 0; display: inline-block; -webkit-transition: color .25s 1.5s, max-width 2s; transition: color .25s 1.5s, max-width 2s; vertical-align: top; white-space: nowrap; overflow: hidden; color: blue; } .btn:hover .btn-text { max-width: 300px; color: white; }

<link href="" rel="stylesheet" /> <div> <button> <span><i aria-hidden="true"></i></span> <span>Shop the image here to click and open</span> </button> </div>

The other problem is that you animating only color, so you need to change your transition property to transition: color 2s, max-width 2s;