JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<div class="button button-box">
  <svg width="150" height="40">
    <rect width="150" height="40" x="0" y="0" fill="none"></rect>
  </svg>
  <span>explore</span>
</div>

<div class="button button-box custom">
  <svg width="150" height="40">
    <rect width="150" height="40" x="0" y="0" fill="none"></rect>
  </svg>
  <span>explore this shit and more!</span>
</div>

CSS

.button-box {
  display: inline-block;
  width: 170px;
  height: 60px;
  font-size: 15px;
  line-height: 62px;
  text-align: center;
  text-transform: lowercase;
  cursor: pointer;
  overflow: hidden;
  bottom: 1px;
  position: relative;
  color: black;
  letter-spacing: .15em;
}

.button-box svg {
  width: calc(100% - 20px);
  left: 10px;
  position: absolute;
  top: 11px;
  height: calc(100% - 20px);
}

.button-box svg rect {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: red;
  stroke-dasharray: 430, 0;
  stroke-dashoffset: -79;
  stroke-width: 2;
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
}

.button-box:hover svg rect {
  stroke-dasharray: 150, 300;
  stroke-dashoffset: -189;
  stroke: green;
}

.custom {
  width: auto;
  height: auto;
  line-height: initial;
  bottom: auto;
  padding: 22px 15px 21px;
}

.custom svg,
.custom rect {
  width: 100%;
}

.custom svg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.custom svg rect {
  stroke: pink;
  stroke-dasharray: 0, 100%;
}
.custom:hover svg rect {
  stroke: pink;
  stroke-dasharray: 400, 200;
  stroke-dashoffset: 0;
}