<section class="center">
<div class="center__inner">
<div class="content">
<label class="button" for="modal__state"><i class="fa fa-rocket"></i> Launch it!</label>
<input type="checkbox" name="modal__state" id="modal__state" class="modal__state">
<div class="modal__overlay">
<label for="modal__state" class="modal__overlay-close"></label>
<div class="modal">
<label class="button button--close modal__close" for="modal__state"><i class="fa fa-times"></i></label>
<h1>Here is the modal!</h2>
<p class="lede">Created with pure CSS, and probably non-functional in many browsers.</p>
<p>The <span class="button button--inline">launch</span> button is a <span class="code"><label></span> attached to a radio <span class="code"><input></span>. Clicking the label toggles the radio input. Using the <span class="code">:checked</span> pseudo-selector and the <span class="code">+</span> sibling selector, the <span class="code">.modal__wrapper</span> is made visible when the radio is checked.</p>
<p>The close button in a second label/radio input with the same name attribute, so when it is clicked, the launch button loses its :checked state and the modal goes back to <span class="code">display: none</span>.<p>
</div>
</div>
</div>
</div>
</section>
$white: #fff;
$light: #B8AE9C;
$dark: #595241;
$blue: #ACCFCC;
$red: #8A0917;
$bHeight: 4px;
html, body {
height: 100%;
}
body {
background-color: $light;
color: $dark;
font-weight: 200;
}
p {
line-height: 1.5;
}
h1 {
margin: 0;
font-weight: inherit;
}
.lede {
font-size: 1.25em;
}
.code {
padding: 2px;
font-size: .9em;
border-radius: 4px;
font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
background: hsla(100,0%,100%,.5);
}
/* horizontal & vertical centering */
.center {
display: table;
width: 100%;
height: 100%;
}
.center__inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* modal */
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
display: none;
}
/* display the modal overlay when the input[type=radio] is checked */
.modal__state:checked + .modal__overlay {
opacity: 1;
animation: fade-in .4s;
display: block;
}
@keyframes scoot-up {
0% { margin-top: 80px;}
100% { margin-top: 50px; }
}
.modal {
position: relative;
margin: 50px;
margin-top: 80px;
padding: 40px 20px;
background: lighten($light,10%);
text-align: left;
box-shadow: 0px 0px 38px rgba(0,0,0,.2);
}
.modal__state:checked + .modal__overlay .modal {
margin-top: 50px;
animation: scoot-up .2s;
animation-timing-function: ease-out;
transform-origin: 50% 0px;
}
.modal__close {
position: absolute;
top: 40px;
right: 20px;
}
.modal__overlay-close {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
/* the input[type=radio] that's toggled when the label is clicked */
.modal__state {
display: none;
}
/* button styles */
.button {
display: inline-block;
padding: 1em;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 $bHeight 0 darken($blue,10%);
background: $blue;
color: $dark;
}
.button:hover, .button:focus {
cursor: pointer;
background-color: lighten($blue, 10%);
box-shadow: 0 $bHeight 0 $blue;
}
.button:active {
margin-top: $bHeight;
margin-bottom: -$bHeight;
box-shadow: 0 0 0 $blue;
}
/* close button */
.button--close {
padding: .2em .5em;
background-color: $red;
box-shadow: 0 $bHeight 0 darken($red,10%);
color: $white;
}
.button--inline {
padding: .25em .5em;
}
.button--close:hover,
.button--close:focus {
background-color: lighten($red, 10%);
box-shadow: 0 $bHeight 0 $red;
}
.button--close:active {
box-shadow: 0 0 0 $red;
}
View Compiled
This Pen doesn't use any external JavaScript resources.