CSS3 animated custom width buttons
Our task was to make up a universal button only in HTML and CSS, which does not have a fixed size in width, which in default state displays only an icon, and when you hover it will show the text inside it.
It would seem that here it is - an obvious and simple solution:
But css transition in this case does not work.
When earlier they came to me and asked, “Is it possible to do this in CSS3?”, I disappointed designers and managers, condemning a kind of incomplete css-property
And yet it turned out that there is one loophole, and it’s simple to disgrace.
Instead,
The same story is applicable when we need to "play around" with
The demo and source code can be found there, in the html and css tabs.
Thanks for attention!
It would seem that here it is - an obvious and simple solution:
.button {
transition: width ease-out 0.2s;
width: 32px;
}
.button:hover {
transition: width ease-out 0.2s;
width: auto;
}
But css transition in this case does not work.
When earlier they came to me and asked, “Is it possible to do this in CSS3?”, I disappointed designers and managers, condemning a kind of incomplete css-property
transition
. And yet it turned out that there is one loophole, and it’s simple to disgrace.
Instead,
width
you need to zayuzat max-width
:.button {
transition: width ease-out 0.2s;
max-width: 32px;
}
.button:hover {
transition: width ease-out 0.2s;
max-width: 300px;
}
The same story is applicable when we need to "play around" with
height
. The demo and source code can be found there, in the html and css tabs.
Thanks for attention!