<div class="confirm">
<h1>Confirm your action</h1>
<p>Are you really <em>really</em> <strong>really</strong> sure that you want to exit this awesome application?</p>
<button>Cancel</button>
<button autofocus>Confirm</button>
</div>
*, *:after, *:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #467fae;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
}
@keyframes fade {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.confirm {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 280px;
max-width: 500px;
height: auto;
background: #E2E2E2;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade 1s ease 1 forwards;
}
.confirm h1 {
text-align: center;
font-size: 1.2rem;
margin: 1.5rem 1rem 0.5rem;
}
.confirm p {
text-align: center;
font-size: 1rem;
margin: 0 2rem 4.5rem;
}
.confirm button {
background: transparent;
border: none;
color: #1678E5;
height: 3rem;
font-size: 1rem;
width: 50%;
position: absolute;
bottom: 0;
cursor: pointer;
}
.confirm button:nth-of-type(1) {
border-top: 1px solid #B4B4B4;
border-right: 1px solid #B4B4B4;
left: 0;
border-radius: 0 0 0 10px;
}
.confirm button:nth-of-type(2) {
border-top: 1px solid #B4B4B4;
right: 0;
border-radius: 0 0 10px 0;
}
.confirm button:focus,
.confirm button:hover {
font-weight: bold;
background: #EFEFEF;
}
.confirm button:active {
background: #D6D6D6;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.