popup div box design in css examples

1adding: 10px;
2  color: #fff;
3  border: 2px solid #06D85F;
4  border-radius: 20px/50px;
5  text-decoration: none;
6  cursor: pointer;
7  transition: all 0.3s ease-out;
8}
9.button:hover {
10  background: #06D85F;
11}
12
13.overlay {
14  position: fixed;
15  top: 0;
16  bottom: 0;
17  left: 0;
18  right: 0;
19  background: rgba(0, 0, 0, 0.7);
20  transition: opacity 500ms;
21  visibility: hidden;
22  opacity: 0;
23}
24.overlay:target {
25  visibility: visible;
26  opacity: 1;
27}
28
29.popup {
30  margin: 70px auto;
31  padding: 20px;
32  background: #fff;
33  border-radius: 5px;
34  width: 30%;
35  position: relative;
36  transition: all 5s ease-in-out;
37}
38
39.popup h2 {
40  margin-top: 0;
41  color: #333;
42  font-family: Tahoma, Arial, sans-serif;
43}
44.popup .close {
45  position: absolute;
46  top: 20px;
47  right: 30px;
48  transition: all 200ms;
49  font-size: 30px;
50  font-weight: bold;
51  text-decoration: none;
52  color: #333;
53}
54.popup .close:hover {
55  color: #06D85F;
56}
57.popup .content {
58  max-height: 30%;
59  overflow: auto;
60}
61
62@media screen and (max-width: 700px){
63  .box{
64    width: 70%;
65  }
66  .popup{
67    width: 70%;
68  }
69}