<a href="javascript:;" class="btn1">버튼</a>
<a href="javascript:;" class="btn2"><span></span> 버튼</a>
<a href="javascript:;" class="btn3">버튼</a>
<a href="javascript:;" class="btn4"> <span class="span1"></span><span class="span2"></span><span class="span3"></span><span class="span4"></span> 버튼</a>
<a href="javascript:;" class="btn5"> <span class="left"></span> <span class="right"></span> 버튼 </a>
<a href="javascript:;" class="btn6"> <span class="left"></span> <span class="right"></span> 버튼 </a>
<a href="javascript:;" class="btn7"> <span class="left"></span> <span class="right"></span> 버튼 </a>
<a href="javascript:;" class="btn8"> <span class="span1"></span><span class="span2"></span><span class="span3"></span><span class="span4"></span> 버튼</a>
<a href="javascript:;" class="btn9"> <span class="left"></span> <span class="right"></span> 버튼 </a>
<a href="javascript:;" class="btn10"> <span class="top"></span> <span class="bottom"></span> 버튼 </a>a{display:block; position: relative; width: 300px; height: 50px; margin-bottom: 30px; line-height: 50px; text-align: center; text-decoration: none; color: inherit; border:1px solid #ccc; overflow: hidden;}
a.btn1::before{content:''; display: block; position: absolute; top: 0; left: 0; height: 50px; background: #ccc;}
a.btn1:hover::before{width: 100%; animation: btn1Ani 0.3s linear 1;}
@keyframes btn1Ani{
0%{width: 0;}
100%{width: 100%;}
}
a.btn2{overflow: hidden; }
a.btn2 span{width: 20px; height: 20px; background: #ccc; display: none; position: absolute; border-radius: 50%;}
a.btn2 span.btn2Ani{animation: btn2Ani 0.5s linear 1; transform: scale(30,30)}
@keyframes btn2Ani {
0%{transform: scale(1,1)}
100%{transform: scale(30,30)}
}
a.btn3::after{display: block; position: absolute; top: 0%; left: -10px; width: 0; height: 70px; transform: skewX(10deg); background: #ccc; }
a.btn3:hover::after{width: 200%; animation: btn3Ani 0.5s linear 1;}
@keyframes btn3Ani{
0%{width: 0}
100%{width: 200%;}
}
a.btn4{position: relative;}
a.btn4 span{width: 25%; height: 50px; position: absolute; display: block; background: #ccc;}
a.btn4 span.span1{top: -50px; left: 0;}
a.btn4 span.span2{top: 50px; left: 25%;}
a.btn4 span.span3{top: -50px; left: 50%;}
a.btn4 span.span4{top: 50px; left: 75%;}
a.btn4:hover span.span1{top: 0; animation: btn4Ani1 0.4s ease 1;}
a.btn4:hover span.span2{top: 0; animation: btn4Ani2 0.4s ease 1;}
a.btn4:hover span.span3{top: 0; animation: btn4Ani1 0.4s ease 1;}
a.btn4:hover span.span4{top: 0; animation: btn4Ani2 0.4s ease 1;}
@keyframes btn4Ani1{
0%{top:-50px}
100%{top:0; }
}
@keyframes btn4Ani2{
0%{top:50px}
100%{top:0; }
}
a.btn5{}
a.btn5 span{width: 0; height: 70px; position: absolute; display: block; top: -10px; background: #ccc; transform: skewX(5deg)}
a.btn5 span.left{left: -10px; }
a.btn5 span.right{right: -10px;}
a.btn5:hover span.left{animation: btn5Ani 0.4s ease 1; width: 60%;}
a.btn5:hover span.right{animation: btn5Ani 0.4s ease 1; width: 60%;}
@keyframes btn5Ani{
0%{width: 0;}
100%{width: 60%;}
}
a.btn6{}
a.btn6 span{width: 0; height: 70px; position: absolute; display: block; top: -10px; background: #ccc; }
a.btn6 span.left{left: -10px; }
a.btn6 span.right{right: -10px;}
a.btn6:hover span.left{animation: btn6Ani 0.4s ease 1; width: 70%;transform: skewX(15deg)}
a.btn6:hover span.right{animation: btn6Ani 0.4s ease 1; width: 70%;transform: skewX(-15deg)}
@keyframes btn6Ani{
0%{width: 0;}
100%{width: 70%;}
}
a.btn7{position: relative;}
a.btn7 span{display:block; position:absolute; width: 15px; height: 15px; border-radius: 50%; background: #ccc; top: 50%; transform: translateY(-50%)}
a.btn7 span.left{left: -15px;}
a.btn7 span.right{right: -15px;}
a.btn7:hover span.left{animation: btn7AniL 0.7s linear 1; left: 50%; transform: scale(30,30);}
a.btn7:hover span.right{animation: btn7AniR 0.7s linear 1; right: 50%; transform: scale(30,30);}
@keyframes btn7AniL{
0%{left: -15px; transform: scale(1,1)}
30%{left: 50%; transform: scale(1,1)}
100%{left:50%; transform: scale(30,30)}
}
@keyframes btn7AniR{
0%{right: -15px; transform: scale(1,1)}
30%{right: 50%; transform: scale(1,1)}
100%{right:50%; transform: scale(30,30)}
}
a.btn8{position: relative; height: 100px;}
a.btn8 span{width: 200px; height: 200px; display: block; position: absolute; background: #ccc;}
a.btn8 span.span1{transform: rotateZ(-45deg); top: -200px; left: -150px;}
a.btn8 span.span2{transform: rotateZ(45deg); top: -200px; right: -150px;}
a.btn8 span.span3{transform: rotateZ(45deg); bottom: -200px; left: -150px;}
a.btn8 span.span4{transform: rotateZ(-45deg); bottom: -200px; right: -150px;}
a.btn8:hover span.span1{top: -50px; left: -30px; animation: btn8Ani1 1s ease 1; }
a.btn8:hover span.span2{top: -50px; right: -30px; animation: btn8Ani2 1s ease 1; }
a.btn8:hover span.span3{bottom: -50px; left: -30px; animation: btn8Ani3 1s ease 1; }
a.btn8:hover span.span4{bottom: -50px;right: -30px; animation: btn8Ani4 1s ease 1; }
@keyframes btn8Ani1{
0%{top: -200px; left: -150px;}
100%{top: -50px; left: -30px;}
}
@keyframes btn8Ani2{
0%{top: -200px; right: -150px;}
100%{top: -50px; right: -30px;}
}
@keyframes btn8Ani3{
0%{bottom: -200px; left: -150px;}
100%{bottom: -50px; left: -30px;}
}
@keyframes btn8Ani4{
0%{bottom: -200px; right: -150px;}
100%{bottom: -50px; right: -30px;}
}
a.btn9{position: relative}
a.btn9 span.left{width: 200%; height: 50px; display: block; position: absolute; top: 0; left: -100%; transform: rotateY(90deg); background: rgba(0,0,0,0.5);}
a.btn9 span.right{width: 200%; height: 50px; display: block; position: absolute; top: 0; right: -100%; transform: rotateY(90deg); background: rgba(0,0,0,0.5);}
a.btn9:hover span.left{animation: btn9Ani 1s ease 1;transform: rotateY(0deg)}
a.btn9:hover span.right{animation: btn9Ani 1s ease 1;transform: rotateY(0deg)}
@keyframes btn9Ani{
0%{transform: rotateY(90deg)}
35%{transform: rotateY(0deg)}
70%{transform: rotateY(90deg)}
100%{transform: rotateY(0deg)}
}
a.btn10{position: relative}
a.btn10 span.top{width: 100%; height: 100px; display: block; position: absolute; top: 0px; left: 0; transform: rotateX(90deg); background: rgba(0,0,0,0.5);}
a.btn10 span.bottom{width: 100%; height: 100px; display: block; position: absolute; bottom: 0px; right: 0; transform: rotateX(90deg); background: rgba(0,0,0,0.5);}
a.btn10:hover span.top{animation: btn10Ani 1s ease 1;transform: rotateX(0deg)}
a.btn10:hover span.bottom{animation: btn10Ani 1s ease 1;transform: rotateX(0deg)}
@keyframes btn10Ani{
0%{transform: rotateX(90deg)}
35%{transform: rotateX(0deg)}
70%{transform: rotateX(90deg)}
100%{transform: rotateX(0deg)}
}
$("a.btn2").hover(function(e){
let btn2Top = $("a.btn2").offset().top;
let btn2Left = $("a.btn2").offset().left;
let currentX = e.pageX;
let currentY = e.pageY;
let topVal = currentY-btn2Top;
let leftVal = currentX-btn2Left;
let btn2Height = $("a.btn2").innerHeight();
let btn2Width = $("a.btn2").innerWidth();
if(topVal > btn2Top + btn2Height){
topVal=btn2Height;
}
if(leftVal > btn2Left + btn2Width){
leftVal=btn2Width;
}
$("a.btn2 span").fadeIn(300).css({
"display":"block",
"top":topVal+"px",
"left":leftVal+"px"
});
setTimeout(function(){
$("a.btn2 span").addClass('btn2Ani')
},200);
},function(){
$("a.btn2 span").hide().removeClass('btn2Ani');
});
External CSS
This Pen doesn't use any external CSS resources.