HTML
<a class="button" href="#openModal">"Click Me!"</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">X</a>
<h2>Hello World!</h2>
<p><b>I'm Sena, nice to meet you</b></p>
<p><b><a href="https://twitter.com/_anesena" target="_blank">Twitter</a> | <a href="https://instagram.com/_anesena" target="_blank">Instagram</a> | <a href="https://anesena.github.io/" target="_blank">Github</a></b></p>
<p class="fineprint"> ------------------------------------------------- </a></p>
<p class="fineprint">© <a href="https://twitter.com/_anesena" target="_blank">Tiesna Sulistiana</a></p>
</div>
</div>
LESS
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
.transition (@time: .5s, @range: all, @ease: ease-out) {
-moz-transition: @range @time @ease;
-webkit-transition: @range @time @ease;
-o-transition: @range @time @ease;
transition: @range @time @ease;
}
.transition-delay (@time: .4s) {
-webkit-transition-delay: @time;
-moz-transition-delay: @time;
-o-transition-delay: @time;
-transition-delay: @time;
}
.border-radius(@radius) {
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius: @radius;
}
.gradient (@coler1: #fff, @coler2: #ccc) {
background: @coler1;
background: -moz-linear-gradient(@coler1, @coler2);
background: -webkit-linear-gradient(@coler1, @coler2);
background: -o-linear-gradient(@coler1, @coler2);
}
.box-shadow(@dims:0 0 10px, @color:#000) {
box-shadow: @dims @color; // Opera, FFX4
-moz-box-shadow:@dims @color; // FFX3.5
-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
.ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}
.inset(@dims:1px 1px 1px, @color:#fff) {
box-shadow: @dims @color; // Opera, FFX4
-moz-box-shadow:@dims @color; // FFX3.5
-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 40px auto;
font-size: 75px;
font-family: 'Amatic SC';
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 20px 70px 30px;
position: relative;
top: 50px;
background: #eee;
width: 300px;
display: block;
text-align: center;
.inset;
.border-radius(3px);
.transition;
&:hover{ color: #333; background: #eeffff; .transition;}
}
.modalbg {
position: fixed;
font-family: Amatic SC;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0);
z-index: 99999;
.transition(2s);
.transition-delay(.2s);
display: block;
pointer-events: none;
.dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
.border-radius(10px);
.gradient;
.box-shadow;
}
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(57, 57 ,57, .8);
.transition();
.dialog {
top: -20px;
.transition(.8s);
.transition-delay;
}
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
.box-shadow;
.transition;
.transition-delay(.2s);
&:hover { background: #00d9ff; .transition; }
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a { color: #333; text-decoration: none; }
