<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover button Devcaffe</title>
</head>
<body>
<style>
html, body{
background: #171717;
height: 100%;
overflow: hidden;
text-align: center;
}
.svg-wrapper{
height:65px;
margin:0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 350px;
}
@media (max-width: 475px) {
.svg-wrapper {
transform: scale(.8);
left: -6%;
}
}
.shape{
fill: transparent;
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
stroke: #fe0;
}
.text{
color: #ffff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;
letter-spacing: 6px;
line-height: 30px;
position: relative;
top: -50px;
}
@keyframes draw {
0%{
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
}
100%{
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 3px;
}
}
.svg-wrapper:hover .shape{
-webkit-animation: 0.5s draw linear forwards;
animation: 0.5s draw linear forwards;
}
</style>
<div class="svg-wrapper">
<!-- This is SVG you can made it from any svg maker -->
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
</svg>
<div class="text">Devcaffe</div>
</div>
</body>
</html>
