Responsive 3 Column Preview Card [Pure CSS + Animation]

This challenge was pretty much straight forward and fun. I had a bit of challenge animating the hover state for the hyperlink text (.btn class in my code) but was later able to achieve it by adding a pseudo element ::after.

Here is how I did it:

HTML🏷️:

<a> TEXT </a>

CSS 🎨:

a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

a::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

Then you can add the transition and set property for color on the anchor tag and transform for the ::after.

Your feedbacks and suggestions are highly appreciated!👍🏽

UPGRADES🚀:

• Improved accessibility
• Animation

As always, Happy Coding!👨🏽‍💻