Some New Trendy Information on Anchor Tag

A designer friend of mine shows me a very cool thing for anchor tags. She had done a beautiful job piecing along the idea for a style system, from elements to patterns and everything in between that might create any front-end developer happily.

But there was a bitty small detail in her work that caught my eye: the hover state for links was a squiggle.

Huh! Not solely had I not seen that before, the concept had ne'er even crossed my mind. seems there are many instances of it on live sites, one being The outline. That was the one that was an implementation that impressed the planning.

Cool, I figured. we are able to do one thing sort of a linear background gradient or perhaps a background image. But! That wasn't the tip of the planning. seems it's animated further. Again, from The Outline:

Whoa! that is pretty wild. I wasn't certain how to approach that, honestly, as a result of invigorating any of my initial ideas would be tough, particularly for cross-browser support.

So, however, did The outline do it? seems, it's SVG. we are able to create a crooked path and animate it pretty easily:

But however, will that job with a link? Well, we are able to use SVG on the background-image property:

But that is sort of stinky as a result of we won't extremely animate that. we want higher values for that. However, we are able to inline CSS directly on the SVG within the background-image property. we won't merely copy and paste the SVG code into the property, however, we are able to with some correct encoding:

And, since SVG will contain its own designs inside the markup, the animation may be tossed right there within the background-image property, the identical method we might do it with CSS in associate degree HTML document head or inline CSS in HTML.

body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

a {
  border-bottom: 1px solid #453886;
  color: #453886;
  padding-bottom: .25em;
  text-decoration: none;
}

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;
}

We can play with it more according to our imagination or demands