How to create a modal with Pure CSS !

Today, In this tutorial I will tell you how to create a modal with pure CSS !

Markup

Here’s the HTML markup for the code.

<a href="#modal" class="modal-btn">Open modal</a>
<div class="modal-overlay" id="modal">
    <div class="modal">
        <h3 class="modal-title">Modal title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus tempore aperiam deleniti consequatur, earum, consectetur et, possimus dolor laborum quia sint facere asperiores quidem repellat illum obcaecati, saepe a beatae?</p>
        <a href="#" class="modal-btn">Got It</a>
    </div>
</div>

The CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 20px;
  font-family: "Segoe ui", sans-serif;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  height: 100%;
  width: 100%;
  background: #0000004a;
}

.modal-overlay:target {
  opacity: 1;
  pointer-events: all;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 600px;
  width: 80%;
  transform: translate(-50%, -50%) scale(.8);
  background: white;
  padding: 20px 30px;
  font-family: "segoe ui", sans-serif;
  border-radius: 4px;
  transition: all 2s ease;
  box-shadow: 0px 8px 40px -20px black;
}

.modal-overlay:target .modal {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.2s ease;
}

Keep on Reading on Tronic247.