Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

Simple SVG Animation CSS Hover Button Animation

Simple SVG Animation CSS Hover Button Animation

In this tutorial we will create a siple svg animation css using just HTML and CSS. Even if we will use the svg animation for a button you can use the effect for any elements you want. The animation we will implement is very simple because with just few lines of css and html it will work.

SVG Animation CSS

Here is the html structure:
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="svg-wrapper">
    <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
      <rect class="shape" height="60" width="320"/>
    </svg>
    <div class="text">HOVER</div>
  </div>
</body>
</html>

And few lines of CSS:
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html,body{
  background:#333;
  height:100%;
  overflow:hidden;
  text-align:center;
}
.svg-wrapper{
  height:60px;
  margin:0 auto;
  position: relative;
  top:50%;
  transform:translateY(-50%);
  width: 320px;
}
.shape{
  fill:transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width:8px;
  stroke:#19f6e8;
}
.text{
  color:#fff;
  font-family:'Roboto Condensed';
  font-size:22px;
  letter-spacing: 9px;
  line-height: 32px;
  position: relative;
  top:-48px;
}
@keyframes draw{
  0%{
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width:8px;
  }
  100%{
    stroke-dasharray: 760;
    stroke-dashoffset:0;
    stroke-width:2px;
  }
}
.svg-wrapper:hover .shape{
  -webkit-animation: 1s draw linear forwards;
  animation: 1s draw linear forwards;
}
 
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
*/?>