CSS & SVG animation

Question

I am working on a button hover effect. I have managed to get it to animate on hover, however I am struggling to reverse the animation.

I have tried changing the stroke array and offset but neither seems to work effectively.

Here is my markup:

    .btn {
	    background: #e02c26;
  	    font-weight: 100;
  	    color: #fff;
  	    cursor: pointer;
  	    display: inline-block;
  	    font-size: 16px;
  	    font-weight: 400;
     	line-height: 45px;
      	margin: 0 auto 2em;
      	max-width: 160px;
      	position: relative;
      	text-decoration: none;
      	text-transform: uppercase;
      	vertical-align: middle;
     	width: 100%;
    }

    .btn span {
    	position: absolute;
	    width: 100%;
    	text-align: center;
    }

    .btn svg {
      	height: 45px;
      	left: 0;
      	position: absolute;
      	top: 0;
      	width: 100%;
    }

    .btn rect {
      	fill: none;
      	stroke: #565656;
      	stroke-width: 2;
  	    stroke-dasharray: 422, 0;
    }

    .btn:hover {
      	background: rgba(225, 51, 45, 0);
      	font-weight: 900;
      	letter-spacing: 1px;
    }

    .btn:hover rect {
  	    stroke-width: 5;
      	stroke-dasharray: 15, 310;
      	stroke-dashoffset: 48;
      	-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
     	transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
    }

    <a href="#" class="btn">
        <svg>
    	    <rect x="0" y="0" fill="none" width="100%" height="100%"/>
        </svg>
        <span>Hover</span>
    </a>

Answer 1

You need to set the transition on the .rect and not on hover, because if you set it on hover, the transition only works on mouse enter and not on mouse out,

But if you set it on the .rect it will work both ways .

Set the transition in .btn rect {...} instead of .btn:hover rect {...}

See code snippet:

.btn {
  background: #e02c26;
  font-weight: 100;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}

.btn span {
  position: absolute;
  width: 100%;
  text-align: center;
}

.btn svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.btn rect {
  fill: none;
  stroke: #565656;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}

.btn:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
}

<a href="#" class="btn">
  <svg>
        <rect x="0" y="0" fill="none" width="100%" height="100%"/>
    </svg>
  <span>Hover</span>
</a>