CSS3 Bezier Curve Example: Creating Link Hover Animation Effects

We will use CSS3 animated transitions to create a simple but attractive link hover effect that will cause a small popup to appear when you hover your mouse over the link.

We'll also take a look at CSS3 Cubic-Bezier curves, which are CSS transitions that give popups a more fluid motion rather than a rigid, mechanical movement.

This is our final result:

Let’s get started!

HTML part

This is the HTML for our link, the icons are from iconfont.cn.

<div class="container">
  <section>
    <a href="#">
      <i class="fab fa-instagram"></i>
      Instagram
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      Github
    </a>
  </section>
</div>

The span tag will become a popup when you hover your mouse over the link. Next, we move onto CSS.

CSS styles and animations

We center the div container so that both links are centered on the screen. This also makes it easy to animate small popups since they will pop up from the top of the link.

div.container {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Next, we style the links, create a simple background hover effect, and position the social media icons.

a {
  color: #fff;
  background: #8a938b;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top: 12px;
  margin: 0 2px;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
a:hover {
  background: #5a665e;
}
i {
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}

Next, we'll style and animate the popup text.

a span {
  color: #666;
  position: absolute;
  font-family: "Chelsea Market", cursive;
  bottom: 0;
  left: -15px;
  right: -15px;
  padding: 15px 7px;
  z-index: -1;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
} /* When the icon is in hover state, the text will pop up */
a:hover span {
  bottom: 130px;
  visibility: visible;
  opacity: 1;
}

A CSS3 Cubic-Bezier curve is defined by four points p0, p1, p2, and p3. Point p0 is the starting point of the curve, and point p3 is the end point of the curve. The more linear the curve, the stiffer (or less smooth) the movement.

If one point starts out as positive and the next point is negative, the motion will be slow at first. When the point value becomes higher than the previous point value, the movement speeds up.

This is what Cubic-Bezier points mean in CSS. Since the animation is short, the movements are subtle. The pop-up starts slowly at the bottom of the square and then starts to speed up towards the top.

Although you can create animations without Cubic-Bezier curve transitions, the differences in the animations are as follows:

Animation with Cubic-Bezier curve transition

No Cubic-Bezier curve transition animation

As you can see, the animation adds life to the hover effect.

The last set of CSS involves styling the little arrow at the bottom of the popup. To learn more about how to make triangles in CSS, check out this CSS Tricks article.

Summarize

We created a minimalistic button-style link. The links have a basic background hover effect, but we didn’t stop there. We added a small popup box to display the text of the link. With the help of CSS3 Cubic-Bezier curves, the animation is smooth and pleasing.

This type of knowledge can be very useful as part of your website design where your social media accounts are displayed.

For the sample demonstration and complete code of this article, please visit the following address. It is recommended to open https://coding.zhanbing.site on PC.

The above is the details of CSS3 Bezier curve example: creating link hover animation effect. For more information about CSS3 Bezier curve, please pay attention to other related articles on 123WORDPRESS.COM!