<svg width="222px" height="66px" viewBox="0 0 222 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sr-only">
  <defs>
    <clipPath id="path-1">
      <path d="M1,1 C1,1 221,1 221,1 C221,1 221,65 221,65 C221,65 19.5,65 19.5,65 C19.5,65 1,45.5 1,45.5 C1,45.5 1,1 1,1 Z" stroke="#979797" fill="none"></path>
    </clipPath>
    <clipPath id="path-2">
      <path d="M1,1 C1,1 205,1 205,1 C205,1 205,49 205,49 C205,49 15,49 15,49 C15,49 1,34 1,34 C1,34 1,1 1,1 Z" stroke="#D0021B" fill="none"></path>
    </clipPath>
    <clipPath id="path-3">
      <path d="M1,1 C1,1 221,1 221,1 C221,1 221,45.5 221,45.5 C221,45.5 202.5,65 202.5,65 C202.5,65 1,65 1,65 C1,65 1,1 1,1 Z" stroke="#979797" fill="none"></path>
    </clipPath>
    <clipPath id="path-4">
      <path d="M1,1 C1,1 203,1 203,1 C203,1 203,32.5 203,32.5 C203,32.5 190,46.5 190,46.5 C190,46.5 1,47 1,47 C1,47 1,1 1,1 Z" stroke="#D0021B" fill="none"></path>
    </clipPath>
  </defs>
</svg>

<div class="box"></div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.box {
  width: 220px;
  height: 64px;
  margin: 5px;
  background-color: #ff79b7;
  clip-path: url(#path-1);
  position: relative;
  cursor: pointer;
  transition: all 0.28s linear;
}

.box::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  background-color: #fff;
  clip-path: url(#path-2);
  transition: all 0.28s linear;
}

.box:hover {
  background-color: #71c2df;
  clip-path: url(#path-3);
}
.box:hover::after {
  clip-path: url(#path-4);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.