Matt Morris

Published on

CSS animated border

Authors
  • avatar
    Name
    Matt Morris
    LinkedIn
THE MAGIC OF CSS

Check out the HTML/CSS code on CodePen: CSS animated border

For a different project I was working on, I had the idea to implement a border that would animate on-hover. I looked for examples of this and found the Framed CSS animated border, by Chance Squires, which I thought would work nicely. However, that exact version didn't suit my purposes because I needed it to work on top of a transparent background. So, I re-created it.

Previous iterations had not allowed for large blocks of text, so I updated the CSS again to enable the border to expand indefinitely and fit containing text while still fully enclosing the box on-hover, as in this example:

Ever since I was a child I have had this instinctive urge for expansion and growth. To me, the function and duty of a quality human being is the sincere and honest development of one's potential. — Bruce Lee