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.

    image

    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, widthyou 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!

    Also popular now: