how to add link to custom button [duplicate]

I need to make the button clickable to a link. I’m guessing I need to adjust the javascript itself ? or is there a simple method to make it so when I click the button it actually goes to a url ?

Below is the code i used in the CSS file and the actual code on the page.

Currently when I click the button, NOTHING happens… I have tried adding the normal to the front of the button but nothing happens… i’m guessing because the CSS and javascript are having the button “slide” so my best guess is i need to add something to the script or css ?

Here is a GIF of what happens
GIF of Button

CSS :

    button{
    background-color: #EC7C28;
  color:#F6F8FF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 25px;
    height: 10px;
}
.slider{
    position: absolute;
    top: -2px;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 30px;
    pointer-events: none;
    transition: 0.5s cubic-bezier(0.50 , -0.600 , 0.200 , 1.6);
   

HTML CODE:

<!-- custom button code -->
    <button type="button" class="button">
        <div class="slider">
            <span class="span1">Getting Started</span>
            <span class="span2">Developer Onboarding Course</span>
        </div>
    </button>
    <script>
        let button = document.querySelector(".button");
        let slider = document.querySelector(".slider");
        let span1 = document.querySelector(".span1");
        let span2 = document.querySelector(".span2");
        button.style.width = span1.clientWidth + "px";
        button.style.height = span1.clientHeight + "px";
        button.onmouseover = function() {
            slider.style.top = "-" + span1.clientHeight + "px";
        }
        button.onmouseout = function() {
            slider.style.top = "0px";
        }
    </script>
    <!-- end custom button code -->