Linear Gradient Issue in Tailwind CSS

Question

I want linear gradient effect only on button but the css is applying on whole screen. Please help me solve this problem.

<a href="#" class="btn">Hire Me</a>

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    background: linear-gradient(45deg, #f06, #3cf, #f06);
    z-index: -1;
    border-radius: 40px;
    background-size: 200%;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    background: linear-gradient(45deg, #f06, #3cf, #f06);
    z-index: -1;
    border-radius: 40px;
    background-size: 200%;
}

The effect is taking on whole screen not on button