Animated Gradient CTA Button with Floating Points

<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mt-8">
  <button type="button" class="button shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
<div class="points_wrapper">
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
</div>

<span class="inner font-sans">Get Started<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg></span>
<style>
.button {
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.25s ease;
background: radial-gradient(65.28% 65.28% at 50% 100%,
    rgba(255, 165, 0, 0.8) 0%,
    rgba(255, 165, 0, 0) 100%),
  linear-gradient(0deg, #f97316, #f97316);
border-radius: 9999px;
border: none;
outline: none;
padding: 12px 24px;
min-height: 48px;
min-width: 102px;
}

.button::before,
.button::after {
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index: 0;
}

.button::before {
inset: 1px;
background: linear-gradient(177.95deg,
    rgba(255, 255, 255, 0.19) 0%,
    rgba(255, 255, 255, 0) 100%);
border-radius: 9999px;
}

.button::after {
inset: 2px;
background: radial-gradient(65.28% 65.28% at 50% 100%,
    rgba(255, 165, 0, 0.8) 0%,
    rgba(255, 165, 0, 0) 100%),
  linear-gradient(0deg, #f97316, #f97316);
border-radius: 9999px;
}

.button:active {
transform: scale(0.95);
}

.points_wrapper {
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
z-index: 1;
}

.points_wrapper .point {
bottom: -10px;
position: absolute;
animation: floating-points infinite ease-in-out;
pointer-events: none;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 9999px;
}

@keyframes floating-points {
0% {
  transform: translateY(0);
}

85% {
  opacity: 0;
}

100% {
  transform: translateY(-55px);
  opacity: 0;
}
}

.points_wrapper .point:nth-child(1) {
left: 10%;
opacity: 1;
animation-duration: 2.35s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(2) {
left: 30%;
opacity: 0.7;
animation-duration: 2.5s;
animation-delay: 0.5s;
}

.points_wrapper .point:nth-child(3) {
left: 25%;
opacity: 0.8;
animation-duration: 2.2s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(4) {
left: 44%;
opacity: 0.6;
animation-duration: 2.05s;
}

.points_wrapper .point:nth-child(5) {
left: 50%;
opacity: 1;
animation-duration: 1.9s;
}

.points_wrapper .point:nth-child(6) {
left: 75%;
opacity: 0.5;
animation-duration: 1.5s;
animation-delay: 1.5s;
}

.points_wrapper .point:nth-child(7) {
left: 88%;
opacity: 0.9;
animation-duration: 2.2s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(8) {
left: 58%;
opacity: 0.8;
animation-duration: 2.25s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(9) {
left: 98%;
opacity: 0.6;
animation-duration: 2.6s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(10) {
left: 65%;
opacity: 1;
animation-duration: 2.5s;
animation-delay: 0.2s;
}

.inner {
z-index: 2;
gap: 6px;
position: relative;
width: 100%;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
transition: color 0.2s ease-in-out;
}

.inner svg.icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
stroke: white;
fill: none;
}

.button:hover svg.icon {
transform: translateX(2px);
}

.button:hover svg.icon path {
animation: dash 0.8s linear forwards;
}

@keyframes dash {
0% {
  stroke-dasharray: 0, 20;
  stroke-dashoffset: 0;
}

50% {
  stroke-dasharray: 10, 10;
  stroke-dashoffset: -5;
}

100% {
  stroke-dasharray: 20, 0;
  stroke-dashoffset: -10;
}
}
</style>
</button>
  <a href="#work"
    class="inline-flex items-center justify-center hover:bg-white/10 text-base font-medium text-white/90 bg-black/20 border-white/10 border rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur"
    style="backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);">
    See our work
  </a>
</div>

<!-- Footer bar in badge -->

</section>