완성모습 codepen.io 링크


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);
}

주요사항

  1. a tag를 이용
    1) mouse hover시 mouse cursor가 pointer 모양으로 바뀐다.
    2) button tag를 이용하면 기존 button tag에 초기화된 사항들 때문에 바꿔줘야하는 것이 많다. a tag를 사용하면 :active pseudo-class만 사용하면 돼서 편하다.
  2. 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