Web Code
Login
Sign Up
HTML
<button class="btn"> <svg width="180px" height="60px" viewBox="0 0 180 60" class="border"> <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" /> <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" /> </svg> <span>HOVER ME</span> </button>
CSS
@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap'); body, html { width: 100%; height: 100%; margin: 0; padding: 0; background: #5CA4EA; overflow: hidden; font-family: 'Lato', sans-serif; display: flex; align-items: center; justify-content: center; } .btn { width: 180px; height: 60px; cursor: pointer; background: transparent; border: 1px solid #91C9FF; outline: none; transition: 1s ease-in-out; position: relative; } svg { position: absolute; left: 0; top: 0; fill: none; stroke: #fff; stroke-dasharray: 150 480; stroke-dashoffset: 150; transition: 1s ease-in-out; } .btn:hover { transition: 1s ease-in-out; background: #4F95DA; } .btn:hover svg { stroke-dashoffset: -480; } .btn span { color: white; font-size: 18px; font-weight: 100; }
JS
Output
