<div class="btn-wrapper">
  <a href="#demo-modal">
    <button>Open</button>
  </a>
</div>

<div id="demo-modal" class="modal">
  <div class="content">
    <h1>CSS Modal</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Rutrum quisque non tellus orci ac auctor augue mauris. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Platea dictumst vestibulum rhoncus est pellentesque elit. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Ut eu sem integer vitae justo. Nec feugiat nisl pretium fusce id velit ut tortor pretium. A condimentum vitae sapien pellentesque habitant morbi. Maecenas sed enim ut sem viverra aliquet eget sit amet. Massa sapien faucibus et molestie ac feugiat.</p>
    <a href="#" class="close">&times;</a>
  </div>
</div>
$yellow: #ffd500;
@import url("https://use.typekit.net/sah2het.css");

$height: 8vmax;
$witdh: 20vmax;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.btn-wrapper {
  background-color: lighten($yellow, 30%);
  border: 1px solid $yellow;
  width: $witdh;
  height: $height;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: all 0.15s ease-in-out;
  &:hover,
  &:focus {
    transition: all 0.5s;
    transform: translate3d(-0.6vmax, 0.6vmax, 0);
    button {
      transition: all 0.5s;
      transform: translate3d(0.95vmax, -0.95vmax, 0);
      outline: none;
    }
  }
}
button {
  position: relative;
  width: $witdh;
  height: $height;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: all 0.15s ease-in-out;
  border-radius: 0;
  background-color: $yellow;
  border: 1px solid $yellow;
  font-family: mostra-nuova, sans-serif;
  font-size: 4vmax;
  &:focus {
    outline-offset: 4px;
    outline: 1px solid $yellow;
    background-color: lighten($yellow, 30%);
  }
}
.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, 0.8);
  transition: all 0.4s;
  &:target {
    visibility: visible;
    opacity: 1;
  }
}
.content {
  border-radius: 10px;
  position: relative;
  width: 60vmax;
  max-width: 90vw;
  background: #ffffff;
  padding: 5vmax;
}
.close {
  text-decoration: none;
  position: absolute;
  font-size: 2em;
  top: 1vmax;
  right: 2vmax;
  color: #242424;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.