CSS HYPERLINK HOVER

When you hover over the anchor element, it transforms into a stylish button-like appearance. The text turns white, and circular shapes appear on both sides of the text, which gradually move to the center. It can be used to create attractive hover effects for links on a webpage..let's create it.

button-animation

  • Let's break it down step by step:
 
  • The HTML part consists of an anchor (<a>) element with an empty <span> element inside it. The <a> element doesn't have an href attribute, so it won't link anywhere.
HTML:
<a href=""><span></span> hover </a>
CSS:
 
In the CSS part, various styles and transitions are applied to the anchor (<a>) element and its pseudo-elements (::before and ::after), as well as the inner <span> element.
 
    • The anchor (<a>) element is styled as an inline-block element with some other properties properties.
    • It has a red color (tomato) for its text and is initially transparent in the background.
    • There's a smooth transition effect applied to all CSS properties with a duration of 0.4 seconds.
    • The anchor has padding to create a clickable area.
    • a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.4rem;
  color: tomato;
  background-color: transparent;
  transition: all .4s;
  padding: 1rem 2rem;
}

  • Pseudo-elements (::before and ::after) are used to create two circular shapes on both sides of the anchor element, initially hidden (opacity: 0). These circles are styled with a red background color (tomato) and are horizontally displaced by using the box-shadow property. They move in from the sides when the anchor is hovered.

    • ::before is on the left side, moving in from the left.
    • ::after is on the right side, moving in from the right.
    • a::before,
a::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: tomato;
  transform: translateY(-50%);
  transition: all .4s;
  z-index: -1;
}

a::before {
  left: -3rem;
  box-shadow: -6rem 0 0 tomato;
  opacity: 0;
}

a::after {
  right: -3rem;
  box-shadow: 6rem 0 0 tomato;
  opacity: 0;
}

  • When the anchor (<a>) element is hovered (a:hover), several changes occur:

    • The text color changes to white.
    • The pseudo-elements (::before and ::after) move to the center of the anchor element, creating a circle effect using transform.
    • The opacity of the pseudo-elements changes to 1, making them fully visible.
    • a:hover::before {
  left: 50%;
  box-shadow: 3rem 0 0 tomato;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
}

a:hover::after {
  right: 50%;
  box-shadow: -3rem 0 0 tomato;
  transform: translateX(50%) translateY(-50%);
  opacity: 1;
}

  • The <span> element inside the anchor is initially scaled down to 0 (completely invisible) and gradually scaled up to 1 (fully visible) with a transition when the anchor (<a>) element is hovered.

  • <span> is used to create a background appearance when you hover over the hyperlink, with some basic properties of CSS. 
  • span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: tomato;
  border-radius: 1rem;
  z-index: -1;
  transform: scale(0);
  transition: all .3s .2s;
}

See Demo : Codepen