아름다운 3D 버튼 - 단계별 가이드

HTML

HTML의 경우 "CLICK"텍스트가 있는 버튼 요소가 하나만 있습니다.

<button>CLICK</button>

CSS

CSS의 경우 일부 기본 스타일을 버튼에 설정합니다.

먼저 border 속성을 none으로 설정하여 버튼의 기본 테두리를 제거합니다.

그런 다음 배경색을 연한 보라색(#976D70)으로 설정하고 텍스트 색상을 흰색(#fff)으로 설정합니다.

이제 멋지게 보이도록 패딩을 추가하겠습니다.
그리고 물론 전환. 따라서 나중에 추가할 호버 효과는 멋지고 부드럽습니다.

테두리 반경을 6px로 설정합니다.

그런 다음 두 개의 그림자를 추가합니다.

첫 번째 것(#665367 0 7px 2px)은 3d 효과를 생성하는 버튼의 아래쪽을 나타내고 두 번째 것(#000 0 8px 6px)은 실제 그림자입니다.

button { 
  border: none; 
  background-color: #976D70; 
  color: #fff; 
  padding: 10px 20px; 
  transition: .2s; 
  border-radius: 6px; 
  box-shadow: #665367 0 7px 2px, 
              #000 0 8px 6px; 
  cursor: pointer; 
}

활성화되면(클릭 시) 버튼을 8px로 변환하고 그림자를 줄입니다.
그러면 버튼 누르기 효과가 생성됩니다.

button:active { 
  transform: translateY(8px); 
  box-shadow: #665367 0 0 0, #000 0 0 3px; 
}

You can get full code here with video tutorial

읽어주셔서 감사합니다 ❤️