I’m trying to create a button that features a scanning animation on hover, designed to resemble the following image:

I initially achieved this using an SVG background image, but I want the button to be SVG Free and responsive without relying on a background image.

Here’s current HTML code:

<button class="tkdbtn" onclick="location.href='./index.html'"><span class="tkdbtn-inner">Learn More</span></button>

And CSS code:

  .tkdbtn:after,
.tkdbtn:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tkdbtn {
  padding: 15px;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 240.37 72.15"><defs><style> .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-2" x="8.15" y="9.25" width="232.22" height="62.9" rx="31.45" ry="31.45"></rect><rect class="cls-1" x="1.5" y="1.5" width="233.73" height="62.9" rx="31.45" ry="31.45"></rect></g></svg>') no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  border: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

.tkdbtn .tkdbtn-inner {
  display: block;
  position: relative;
  z-index: 2;
}

.tkdbtn:after {
  box-shadow: rgb(212 207 201 / 75%) 0 0 15px 2px;
  background: #000000;
  content: "";
  height: 1px;
  opacity: 0;
}

.tkdbtn:before {
  content: "";
  opacity: 0;
}

.tkdbtn:hover {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 240.37 72.15"><defs><style> .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-2" x="8.15" y="9.25" width="232.22" height="62.9" rx="31.45" ry="31.45"></rect><rect class="cls-1" x="1.5" y="1.5" width="233.73" height="62.9" rx="31.45" ry="31.45"></rect></g></svg>') no-repeat center center;
  background-size: contain;
  color: #000000; /* Ensure text color stays the same */
}

.tkdbtn:hover:before {
  opacity: 1;
}

.tkdbtn:hover:after {
  animation: scan 2s infinite;
  opacity: 1;
}

@keyframes scan {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}