<div class="container">
<a href="#" class="btn-open">PUSH ME</a>
</div>
.container {
font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
text-align: center;
padding-top: 40px;
}
.btn-open {
display: inline-block;
width: 180px;
height:50px;
text-align: center;
background-color: #9ec34b;
font-size: 16px;
line-height: 52px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #9ec34b;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-open:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open:hover{
color: #9ec34b;
}
.btn-open:hover:after{
height: 240%;
opacity: 1;
}
.btn-open:active:after{
height: 340%;
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.