티스토리 뷰
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>버튼 호버 효과</title>
<style>
* { margin:0; padding:0; box-sizing: border-box;}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #111;
}
.btn {
position: relative;
padding: 15px 40px;
border: 2px solid #41f321;
margin: 10px;
display: inline-block;
text-decoration: none;
color: #41f321;
letter-spacing: 2px;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
}
.btn:hover {
color: #111;
}
.btn span {
position: absolute;
display: block;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #41f321;
transition: width 0.5s, height 0.5s;
z-index: -1;
}
.btn:hover span {
width: 350px;
height: 350px;
}
</style>
</head>
<body>
<a href="#" class="btn"><span></span>Button</a>
<a href="#" class="btn"><span></span>Button</a>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(e) {
$('.btn').on('mouseenter', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find('span').css({top:y,left:x});
});
$('.btn').on('mouseout', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find('span').css({top:y,left:x});
});
})
</script>
</body>
</html>출처: www.youtube.com/watch?v=4DkMKyWJlvk&ab_channel=OnlineTutorials
'Youtube 따라하기' 카테고리의 다른 글
| Anime.js를 사용하여 Vanilla JS로 SVG 모핑 페이지 전환 만들기! (0) | 2020.12.21 |
|---|---|
| WebGL을 이용한 호버 효과 (0) | 2020.12.14 |
| 뜨거운 찻잔 애니메이션 효과 (0) | 2020.12.10 |
| 애니메이션 체크박스 (0) | 2020.11.23 |
| 라디오 버튼 디자인 변경 (0) | 2020.10.29 |