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;
}
}