Delay reveal of button after 8 minutes on page

Hi SS experts

I believe this can be done with Javascript - would appreciate anyone pointing me in the right direction to find this (or hire someone to do this).

I have a simple page which is a Headline & embedded Vimeo video, and I'd like the button to checkout to appear after 8 minutes on the page. I actually do have more below the button which I'd also love to include (maybe have a section appear?) but don't know if I'm asking too much, so a button is enough!

All the codes I can find are a gradual appearance but not a delayed appearance.

Is this possible?

You could do this also with css:

This is my take on this subject:  https://codepen.io/jozsefk/pen/yLjzeaE

You just need to change the 10s to 480s (8 minutes)

10 hours ago, joseph81 said:

You could do this also with css:

This is my take on this subject:  https://codepen.io/jozsefk/pen/yLjzeaE

You just need to change the 10s to 480s (8 minutes)

Thank you! Sorry I'm not a SS designer (this is my own DIY site) so can you explain how to use that please?

Yes of course, I will provide you with an explanation today !

I wrote today an article about this issue, thanks for the idea. 

You can accomplish displaying a section with a delay with CSS and Javascript or just with CSS.

In order to add CSS you need to go to the Custom CSS panel and add the code that I displayed in the article:

@keyframes display {
  from { 
    width: 0;
    height: 0;
  }
  to { 
    width: auto;
    height: auto;
  }
}
.target {
  overflow: hidden;
  animation-name: display;
  animation-duration: 10s;
}

In case you have also min-height specified and the hiding does not work please use the other solution with the 0% to 99.9999% animation and add min-height: 0 to both 0% and 99.9999% and you have to extract min-height from developer toolbar when inspecting the section. 

You inspect the element(clicking right on the browser on the element and Inspect action:

On the right you can see if you have min-height on the section element. If yes, you need to put min-height:0 on both 0% and 99.9999% step and on the 100% step you put the min-height value from the developer toolbar value(when inspecting).

For more details please read the article.

https://www.ui-workarounds.com/how-to-display-a-hidden-element-after-n-seconds-with-css-and-javascript/

Thank you so much @joseph81

I have followed your instructions as best that I can, managed to hide the section but now it's not reappearing.

Here are screenshots of what I've done....(I changed it to 6 seconds to test it) - have I done something wrong here?

Don't worry - someone gave me a solution with this code...

Sorry, it was night here when you wrote. The problem was that you did not change the id for the element, so instead of .target you should have used the id with the 451 ending.

The solution with the visibility is fine but remember that it is taking place on your page, might be even covering other elements. Visibility:hidden only makes the element opaque just like the opacity:0 but it still occupies space.  But if that is not a problem for you then it is the easiest solution, I guess.