Создание адаптивной кнопки с анимацией при наведении, аналогичной заданному дизайну, без использования фоновых изображен ⇐ CSS

[Anonymous]

Я пытаюсь создать кнопку с анимацией сканирования при наведении, напоминающую следующее изображение:
[img]https:/ /i.ibb.co/92R5YpZ/Screenshot-2024-07-11-at-21-47-04.png[/img]

Изначально я добился этого, используя фоновое изображение SVG, но я хочу, чтобы кнопка была бесплатной и отзывчивой в формате SVG, не полагаясь на фоновое изображение.
Вот текущий HTML-код:
Learn More

И код CSS:
.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, .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } ') 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, .cls-1 { fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 3px; } .cls-2 { fill: %23daf9d7; } ') 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;
}
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... sign-witho