<div class="popup">
<button class="close">
Закрыть
<span></span>
</button>
<div class="content">
<h3>Beauty close</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum dolores voluptatem fuga vel quidem corporis ratione beatae odit possimus dignissimos?</p>
<p>Nam eius blanditiis ducimus quia, praesentium soluta? Assumenda error enim amet nulla accusantium soluta dolor aliquid eum minima repellendus, quos et quia.</p>
</div>
</div>
.popup {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
width: 100vw;
max-width: 100%;
height: 100%;
height: 100vh;
max-height: 100vh;
}
.close {
position: absolute;
right: 20px;
top: 10px;
display: block;
width: 120px;
height: 40px;
padding: 0 40px 0 0;
background-color: transparent;
transition: all 0.3s ease-out;
border: none;
cursor: pointer;
font-size: 18px;
font-weight: bold;
z-index: 1;
&::before,
&::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
display: block;
width: 30px;
height: 4px;
transition: all 0.3s ease-out;
border-radius: 2px;
background-color: currentColor;
}
&::before {
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
&:hover {
color: darkorange;
&::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(45deg);
}
}
span {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
width: 100wv;
height: 100%;
height: 100vh;
z-index: -1;
}
}
.content {
position: absolute;
top: 50px;
left: 50%;
z-index: 3;
display: block;
width: 90%;
width: 90vw;
height: 90%;
height: 90vh;
padding: 10px 15px;
box-sizing: border-box;
transform: translateX(-50%);
background-color: #ccc;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.