Make product page 'purchase' button floating

Site URL: https://moox.house/training

Hi all,

Custom code newbie here.

I need to make the 'book now' button on a product page float on mobile (and keep it static on web). I'm looking to have it stick to the bottom of the page, ideally something like the attached example.

My page is live at https://moox.house/training.

Does anyone know how to get this done?

Thanks

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    right: 0;
}
}

Thanks @tuanphan that worked like a charm!

Do you know how I can vertically extend the white background I've put behind the button? And how I can make the button solid (eg. solid black button with white text)?

I've currently got:

@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
    text-align: center;
     position: fixed;
    background-color: #FFFFFF;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    right: 0;
      box-shadow: 0px -0.1px 10px grey;
}
}

background: black;

color: white;