• HTML
• CSS

HTML

<div class="container_mouse">
    <div class="mouse-btn">
        <span class="mouse-scroll"></span>
    </div>
    <span class="text">saiba mais</span>
</div>

CSS

*,*:after,*::before{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Verdana,Geneva,Tahoma,sans-serif;
    background:#212121;
    overflow-y:hidden;
}
.mouse-btn{
    margin:10px auto;
    width:40px;
    height:80px;
    border:3px solid #7a7a7a;
    border-radius:20px;
    display:flex;
}
.mouse-scroll{
    display:block;
    width:20px;
    height:20px;
    background:#737375;
    border-radius:50%;
    margin:auto;
    animation:scrolling 1s linear infinite;
}
.container_mouse .text{
    color:#c2c2c2;
}
@keyframes scrolling{
    0%{
        opacity:0;
        transform:translateY(-20px);
    }
    100%{
        opacity:1;
        transform:translateY(20px);
    }
}

/* All the credits: https://www.youtube.com/watch?v=JPlLd_hE6-k */