Pure CSS modal, just for fun
A Pen by Tuan Nguyen on CodePen.
Pure CSS modal, just for fun
A Pen by Tuan Nguyen on CodePen.
<h1>CSS modal</h1> | |
<input id="state" class="hidden" type="checkbox" /> | |
<div class="overlay"> | |
<div class="overlay-inner"> | |
<label class="button" for="state">Click Here!</label> | |
</div> | |
</div> |
@import "bourbon"; | |
html, body { | |
font-family: 'Open Sans', sans-serif; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
} | |
.hidden { | |
display: none; | |
} | |
.overlay { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0, 0, 0, 0); | |
z-index: 10; | |
@include transition(all 0.5s ease-out); | |
.overlay-inner { | |
width: 120px; | |
height: 40px; | |
position: absolute; | |
display: block; | |
text-align: center; | |
top: 50%; | |
left: 50%; | |
background: transparent; | |
margin-top: -20px; | |
margin-left: -60px; | |
@include border-top-radius(3px); | |
@include border-bottom-radius(3px); | |
@include transition(all 1.0s $ease-out-quint); | |
} | |
} | |
#state:checked + .overlay { | |
background-color: rgba(0, 0, 0, 0.3); | |
.overlay-inner { | |
width: 350px; | |
height: 170px; | |
padding-top: 130px; | |
margin-top: -150px; | |
margin-left: -175px; | |
background-color: white; | |
box-shadow: 0 0 5px grey; | |
} | |
} | |
.button { | |
display: inline-block; | |
margin: 0 auto; | |
width: 98px; | |
font-size: 16px; | |
line-height: 18px; | |
padding: 10px; | |
color: white; | |
text-align: center; | |
border: 1px solid darken(#477DCA, 10); | |
background-color: #477DCA; | |
@include border-top-radius(3px); | |
@include border-bottom-radius(3px); | |
cursor: pointer; | |
} |