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;
}