link-hover-effect-with-svg-using-html-and-css-only

Link Hover Effect With SVG | Html And Css

We'll learn how to create a link hover effect animation with svg using html css only. We'll be using css transition and transform property, svg to create the effect.

A link hover effect is a common design element with the goal of highlighting, or bringing attention to, a hyperlink by changing the visual state of an associated object. Apart from this, The link hover effect animation with svg using html css only is a simple animation that could be used to enhance the user experience. We'll have a link with an svg inside it. The svg icon will have two path elements, one for the initial state and one for the hover state. Basic steps for this animation as below:

Create an svg file.
Add the svg inside anchor html tag.
Add css rules for when the link is hovered.

The problem with hover effect animations is that different browsers have different implementations, which may lead to inconsistent behaviour of the animation. It is also difficult to achieve hover animations with complex calculations in JavaScript or other scripting languages.

To solve this problem, we are using svg for link hover effects. This approach has many benefits, including cross-browser compatibility and accurate rendering of graphics on high-resolution displays such as retina screens.

A link is often designed as an arrow pointing to another URL, but other shapes and forms can also be used. Hover effects may change the text color and/or background, create a change in other attributes like color brightness or contrast, animate the illustration or icon emitting the link. So this article will show you how to add a hover effect animation in link with svg using html, css only.

For more button animations you can follow the button playlist.

You can read interesting articles on web development.

01. HTML
02. CSS
03. Output
04. Youtube Video
05. Source Code

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Link Hover Effect With SVG | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="#">Hover
  <svg viewBox="0 0 70 36">
    <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" />
  </svg>
</a>

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

:root{
  --text: #000;
  --line: #000;
  --line-active: #000;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F6FF;
  font-family: "Poppins", sans-serif;
}

a{
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #000;
  font-size: 20px;
  margin: 0 var(--spacing, 0px);
  transition: margin 0.25s;
}

a:hover{
  --spacing: 4px;
  --stroke: #000;
  --stroke-delay: 0.1s;
  --offset: 180px;
}

a svg{
  width: 120px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
  transform: translate(-50%, 7px) translateZ(0);
}

Output:

Youtube Video:

To get more clarification about this tutorial, you can go through the given video.

Source Code:

Before downloading this code, it is always better to first write the code by yourself. You can then cross-check your work with the original one.

Archive