<div>
<a href="#">
<h2>A Post-it</h2>
<p>Buy milk!</p>
</a>
</div>
* {
margin:0;
padding:0;
}
body {
font-family:arial,sans-serif;
font-size:100%;
background:#fff;
margin-top: 50px;
}
h2, p {
font-size:100%;
font-weight:normal;
}
div a {
text-decoration:none;
color:#000;
background:#FFFFA5;
display:block;
height:150px;
width:150px;
padding:18px;
-moz-transition:-moz-transform .4s ease-in-out;
-o-transition:-o-transform .4s ease-in-out;
-webkit-transition:-webkit-transform .4s ease-in-out;
margin: 0 auto;
}
div h2 {
font-size:140%;
font-weight:bold;
padding-bottom:10px;
}
div p {
font-family:"Reenie Beanie",arial,sans-serif;
font-size:180%;
}
div a {
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform:rotate(-6deg);
}
div a:hover, div a:focus {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
/*
Developed with love by Blu Frame
http://blufra.me
*/
This Pen doesn't use any external JavaScript resources.