Show button in Generateblocks time-controlled

Hi there,

it is possible with Javascript.
Add this JS to the wp_footer hook:

<script>
window.onload = function() {
    document.getElementById('fade-in-button').className = 'active';
};
</script>

And add this CSS to the site:

#fade-in-button {
    opacity: 0;
    transition: opacity 0.2s ease-in;
    transition-delay: opacity 5s;
}
#fade-in-button.active {
    opacity: 1;
}

Then give your button an ID of fade-in-button

The only problem is if a user has JS disabled in their browser the button may never appear.
There is ways around that but it would involve the button being visible to begin with.

Many Thanks David

You're welcome

Hi David,

can we use this code to fade in a container too?
and what changes need to be done?

Thanks in advance.

Hi Heinrich,

yes you can use the same code as above, it doesn't matter if it is a button or any block.
But if you want you can change the ID being used to anything you want.
For example we change the fade-in-button to fade-in-block:

1. The script:

<script>
window.onload = function() {
    document.getElementById('fade-in-block').className = 'active';
};
</script>

2. The CSS:

#fade-in-block {
    opacity: 0;
    transition: opacity 0.2s ease-in;
    transition-delay: opacity 5s;
}
#fade-in-block.active {
    opacity: 1;
}

3. The ID you add to your block is: fade-in-block

hi david, thought so too, but do not get it to run. the element is visible immediate and don`t fade in.

If you want to raise a new topic where you can share a link to your site and where i can see the issue, ill take a quick look.

perfect, coming in a minute