<div id="container">
<div class="container-inner">
<div class="content">
<p>Do you want to Continue?</p>
</div>
<div class="buttons">
<button type="button" class="confirm">Confirm</button>
<button type="button" class="cancel">Cancel</button>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Skranji&display=swap");
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(#113156, #070731);
height: 100vh;
width: 100vw;
}
#container {
max-width: 100vw;
height: 100vh;
position: fixed;
width: 100%;
left: 50%;
top: 0;
transform: translate(-50%);
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(#203462 2px, transparent 2px);
background-size: calc(10 * 2px) calc(10 * 2px);
}
.container-inner {
background: #a4363e;
padding: 40px;
border-radius: 30px;
box-shadow: 5px 6px 0px -2px #620d15, -6px 5px 0px -2px #620d15,
0px -2px 0px 2px #ee9191, 0px 10px 0px 0px #610c14,
0px -10px 0px 1px #e66565, 0px 0px 180px 90px #0d2f66;
width: 640px;
}
.content {
font-family: "Skranji", cursive;
background: radial-gradient(#fffbf3, #ffe19e);
padding: 24px;
box-sizing: border-box;
border-radius: 20px 18px 20px 18px;
box-shadow: 0px 0px 0px 6px #5e1e21, 0px 0px 8px 6px #84222b,
inset 0px 0px 15px 0px #614506, 6px 6px 1px 1px #e66565,
-6px 6px 1px 1px #e66565;
text-align: center;
p {
font-size: 56px;
padding: 40px;
box-sizing: border-box;
color: #461417;
}
}
.buttons {
margin-top: 40px;
display: flex;
justify-content: normal;
align-items: center;
gap: 30px;
box-sizing: border-box;
button {
padding: 20px;
flex: 1;
border-radius: 20px;
border: 2px solid #49181e;
font-family: "Skranji", cursive;
color: #fff;
font-size: 32px;
text-shadow: 1px 2px 3px #000000;
cursor: pointer;
&.confirm {
background: linear-gradient(#ced869, #536d1b);
box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565;
&:hover {
box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565,
inset 2px 2px 10px 3px #4e6217;
}
}
&.cancel {
background: linear-gradient(#ea7079, #891a1a);
box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565;
&:hover {
box-shadow: 0px 0px 0px 4px #7e1522, 0px 2px 0px 3px #e66565,
inset 2px 2px 10px 3px #822828;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.