Search code examples
cssbuttondelayvisibility

I need to add, some delay, to make appear a boutton

I need to add some delay to a "function",this is for a web that I am doing, and the button is already there, I only change his visibility. I've tried many things, but it didn't work. The first block is to make the button not visible, and the second to make it visible, the ideas were to add some code between, to add this delay. Heres it the code:

body.page-id-2090 #button{
    visibility: hidden;
}
body.page-id-2090 #button{
    visibility: visible;
}

Solution

  • You can achieve it by using animation-delay

    button {
  animation: show 0s both;
  /* show after 2 seconds */
  animation-delay: 2s;
}


@keyframes show {
  from {
    visibility: hidden;
  }
  
  to {
    visibility: visible;
  }
}
    <p>User agreements: Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<button>I agree</button>