<h1>POP-UP!</h1>
<p>pure css popup</p>

<a class="button" href="#popup">Open pop-up</a>

<a href="#" class="popup-overlay" id="popup">
  <div class="popup-content">
    <p>This is a pop-up !</p>
    <div><button>ok</button></div>
  </div>
</a>

html
  background-color #4
  color #f
  text-align center
h1
  text-align center
  font-weight normal
  font-style italic
.button
  text-decoration none
  color #f
  background-color #0
  display block
  width max-content
  margin auto
  height 4em
  line-height 4em
  padding 0 2em
  position absolute
  top 0
  left 0
  right 0
  bottom 0

.popup-overlay
  opacity 0
  display block
  visibility hidden
  background-image repeating-linear-gradient(-45deg, #0009 0px, #0009 10px, #8209 10px, #8209 20px)
  position fixed
  transition all .5s ease
  top 0
  left 0
  right 0
  bottom 0
  text-align center
  pointer-events none
  .popup-content
    transition transform .5s ease-in
    transform perspective(500px) translateZ(-5em) rotateX(-20deg)
    
  &:target
    pointer-events auto
    opacity 1
    visibility visible
    .popup-content
      transition-timing-function ease-out
      transform perspective(500px) translateZ(0) rotateX(0deg)
.popup-content
  text-decoration none
  color #0
  display block
  background-color #fff
  width max-content
  height max-content
  height 100px
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  margin auto
  padding 2em
  &:before
    content '×'
    position absolute
    right 0
    top 0
    display block
    font-family serif
    font-size 2em
    width 1em
    height 1em
    line-height 1em