CSS Hover Effect

HTML
<div class="svg-content"> <svg height="60" width="100%" xlmns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="400" /> <div class="text">CODEPAD.CO</div> </svg> </div>
CSS
html, body{ background: rgba(21, 21, 21, 1); text-align: center; height: 100%; overflow: hidden; } .svg-content{ position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 400px; } .shape{ stroke-dasharray 140 640; stroke-dashoffset: -590; fill: transparent; stroke: #f00; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; } .text{ color: #f00; font-family: "Helvetica"; font-size: 24px; line-height: 32px; letter-spacing: 8px; top: -48px; position: relative; } .svg-content:hover .shape{ stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 960; }
JAVASCRIPT
Expand for more options Login