【CSS】클릭 버튼을 누르면 버튼이 움푹 패인 애니메이션

완성형 확인

클릭 버튼을 누르면 버튼이 움푹 패인 애니메이션을 만들어 봅시다



위의 애니메이션과 같은 것을 완성합시다!
매우 쉽습니다
...하지만 그 전에 active 설명

: active

요소가 클릭되면 CSS가 적용됩니다.

セレクタ:active {
  プロパティ: 値;
}

쓰는 방법은 hover와 비슷합니다

예.html

<p>You！押しちゃいな</p>

예.css

p:active {
  background-color: red;
}

이런 식으로 클릭하면 배경이 붉어집니다
이것에 근거해 애니메이션을 작성해 갑시다!

애니메이션 만들기

이 애니메이션을 만들려고 할 때 프로그램이 어떻게 움직이고 있는지

포인트
　 클릭하면 애니메이션이 움직이고 있다
　 클릭하면 그림자가 없어진다
　 클릭하면 빨간 버튼 부분이 아래로 이동하고 있다
이 3점을 기준으로 작성하자

우선 HTML

버튼 만들기로.html

<p>You！押しちゃいな</p>

이것은 더 간단합니다
이제 완성

그럼 다음은 CSS

버튼 만들기 .css

p {
  background-color: red;
  box-shadow: 0px 10px #bfbfbf;
  width: 150px;
  text-align: center;
}

버튼의 색상을 빨간색으로
버튼 아래에 10px 회색 그림자를 만듭니다.
폭은 150px 정도로 좋을까・・・
멋지게 문자는 중앙 정렬



네! 우선 버튼은 완성
여기에서 애니메이션을 찍자

클릭하면 애니메이션이 움직이기 때문에 ...

버튼 만들기 .css

p:active {

}

우선 첫 번째 포인트

클릭하면 애니메이션이 움직입니다.

그렇기 때문에 active 를 설정.

active 를 설정했을 뿐이므로 내용은 카라.
여기에 무엇을 넣을까요?
두 번째 포인트의

클릭하면 그림자가 없어집니다.

라는 부분.
바로 입력해 보자

버튼 만들기 .css

p:active {
  box-shadow: none;
}

그림자가 없어졌습니다!
그림자를 없애고 싶을 때는 box-shadow: none; 하면 그림자가 사라집니다

그런데, 그림자는 사라졌지만 아직 버튼답지 않다. .
이건 그냥 그림자가 사라졌을 뿐.
어떻게 해야할지라면 세 번째

클릭하면 빨간색 버튼 부분이 아래로 이동합니다.

설정하면 애니메이션이 완성됩니다

p : active에 CSS 추가

버튼 만들기 .css

p:active {
  box-shadow: none;
  position: relative;
  top: 10px;
}

position: relative; 는 【CSS】position: absolute; 와 position: relative; 로 정리했을 때에 기준 위치를 결정하는 것으로 사용했습니다.
하지만 요소의 위치를 ​​변경하는 방법도 있습니다

이번에는 10px의 그림자가 없어진 만큼 아래로 어긋나고 싶기 때문에
position: relative;
top: 10px;
합니다.

그럼 애니메이션을 보자



버튼을 누를 수 있습니다

덤

아까의 코드를 근거로 한 뒤, 보다 버튼 같은 것을 작성했습니다.
코드는 다음과 같습니다.

버튼 같은 버튼.html

<p>click!</p>

버튼 같은 버튼.css

p {
  background-color: #1e90ff;
  box-shadow: 0px 3px #000080;
  width: 100px;
  text-align: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 30px;
  border-radius: 50px;
}

p:active {
  box-shadow: none;
  position: relative;
  top: 3px;
}