간단한 3D CSS 버튼

4606 단어 htmlnewbiewebdevcss
안녕하세요, 이것은 저의 첫 번째 기사이며 멍청한 놈을 위한 CSS 튜토리얼을 할 것입니다.

HTML



HTML은 여기에서 정말 간단합니다. 태그를 사용하여 3개의 링크를 넣습니다 in the body.
.

<body>
    <a href="#" class="btn b-1">
        Button 1 (.b-1)
    </a>
    <a href="#" class="btn b-2">
        Button 2 (.b-2)
    </a>
    <a href="#" class="btn b-3">
        Button 3 (.b-3)
    </a>
</body>

기본 CSS 속성에 대한 btn 및 세 가지 다른 동작에 대한 b-x 2개의 클래스로 3개의 버튼을 선언했습니다.

CSS


기본 CSS 속성



좋아, CSS 부분으로 가자. 버튼 부분으로 이동하겠습니다. 지금은 쓸모가 없기 때문에 본체 속성을 설명하지 않겠습니다.

.btn {
  color: #e5dc15;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem;
  padding: 0.5rem;
  border: 2px solid #e5dc15;
  border-radius: 0.5rem;
}

.btn:hover {
  background: #e5dc15;
  color: #0e79b2;
}


버튼 색상과 테두리를 제공하기 위해 몇 가지 기본 속성을 선언했습니다.



"3D" 속성



알겠습니다. 3차원에 그림자를 추가하기 때문에 "3D"라고 부르고 싶습니다. 이 속성을 .btn 클래스에 추가해 보겠습니다.box-shadow: 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4);무엇을합니까? 우리는 두 개의 그림자를 선언하고 있습니다. 첫 번째 값은 수평 오프셋(분명히 0임)이고 두 번째 값은 수직 오프셋이고 색상이 있습니다.
어두운 노란색을 사용하여 그림자를 설정하여 "3D"모양을 만든 다음 "실제"회색 그림자를 버튼에 추가합니다.

전환 속성 및 관련



이제 우리는 .btn 클래스에 3개의 속성을 추가하고 있습니다. 이들은 전환의 기반인 시작점입니다.

  position: relative;
  top: 0;
  transition: all 300ms ease-in-out;


우리는 position: relative 속성을 0으로 설정하기 위해 top 를 설정하고 있습니다.
그런 다음 모든 요소(이 경우 배경, 텍스트, 위치 및 상자 그림자)에 300ms의 지속 시간과 더 부드러운 전환을 제공하는 타이밍 기능을 사용하여 transition를 설정합니다.

버튼 전환



세 개의 버튼에 대해 세 가지:hover 선언과 세 가지:active 선언을 설정해 보겠습니다.

b-1



첫 번째 버튼은 마우스를 올리면 낮아지고 클릭하면 더 낮아집니다.
따라서 top: 0.2em를 0.2em의 아래쪽 버튼으로 설정한 다음 동일한 값에 대해 상자 그림자도 낮춥니다.
그런 다음 이전과 같은 방식으로 top: 0.4em와 상자 그림자를 설정합니다.

.btn.b-1:hover {
  top: 0.2em;
  box-shadow: 0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4);
}

.btn.b-1:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}




나-2



두 번째 버튼에서는 호버링 시 아무 작업도 수행하지 않지만 클릭 시 모든 버튼을 내립니다.
그래서 우리는 top: 0.6em를 넣어 초기 노란색 상자 그림자의 최대 값에 대한 버튼을 낮추지만 "3d 효과"를 남기기 위해 약간의 회색 그림자를 남겨둡니다.

 .btn.b-2:active {
  top: 0.6em;
  box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);
}




나-3



세 번째 버튼에서는 호버 시 버튼을 들어올리고 클릭 시 첫 번째 버튼과 동일한 작업을 수행합니다.
그렇다면 버튼을 어떻게 들어 올릴 수 있습니까? bottom 속성을 사용할 수 있지만 초기 클래스에 대해 0으로 설정해야 합니다.
여기에서는 단순함을 위해 동일한 방식으로 작동하는 음수 상단 값을 사용하고 있습니다.
이제 요소가 더 높기 때문에 음수top 값과 더 높은 회색 그림자를 설정합니다.

.btn.b-3:hover {
  top: -0.5em;
  box-shadow: 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4);
}

.btn.b-3:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}




결론



자, 이 간단한 CSS 튜토리얼을 마쳤습니다. 다음은 내 새 포트폴리오 웹사이트에서 사용하고 싶은 Canvas 애니메이션이 될 것입니다.

고맙습니다.

데모 및 코드: CodeSandbox
UNEXPECTED TOP-LEVEL ERROR: sc8825 오류
PostgreSQL 문제 해결 – 연결 수가 너무 많음

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage