html
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="javascript:void(0);" class="button" draggable="false"></a>
</body>
</html>css
a.button{
display: block;
margin: auto;
margin-top: 20%;
width: 5rem;
height: 5rem;
border-radius: 50%;
box-shadow:inset 0px -2px 2px 1px rgb(30, 30, 30),
0px 3px 4px rgba(50, 50, 50, 0.6);
}
a.button:active {
box-shadow:inset 0px 0px 4px -1px rgb(0, 0, 0);
}주요사항
- a tag를 이용
1) mouse hover시 mouse cursor가 pointer 모양으로 바뀐다.
2) button tag를 이용하면 기존 button tag에 초기화된 사항들 때문에 바꿔줘야하는 것이 많다. a tag를 사용하면 :active pseudo-class만 사용하면 돼서 편하다. - box-shadow
1) h-offset v-offset blur spread color 순서인데 참고의 2번링크에 들어가서 보는게 제일 개념잡기에 편하다.
2) inset과 일반적인 box-shadow로 버튼 안쪽 그림자를 만들어줘서 3d 효과를 내고
3) 클릭했을 때 box-shadow 조정으로 클릭한 느낌이 나게 만드는 것이 중요했다.
참고
1. https://codepen.io/davilious/pen/FcmDx
2. https://www.cssmatic.com/box-shadow
FE Developer @Medistream