참고: https://www.geeksforgeeks.org/how-to-add-a-pressed-effect-on-button-click-in-css/
이 포스트에서는 CSS를 사용하여 버튼을 눌렀을 때 효과를 추가하는 방법을 설명합니다. 이러한 효과는 모던 UI 디자인의 한 부분으로 많은 웹 사이트에서 사용하고 있습니다. 눌림 효과가 없는 일반적인 동작과는 다르게 버튼 눌림 효과를 통해 사용자는 HTML 요소와의 상호작용 경험을 느낄 수 있습니다.
이 효과를 만들기 위해 'active' 수도 클래스(pseudo class)를 사용할 것 입니다. 이 CSS 수도 클래스는 사용자가 버튼을 클릭하면 자동으로 HTML 요소에 추가가 됩니다.
버튼 눌림 효과 주기 1
버튼을 눌렀을 때(press down 했을 때) 우리는 CSS transform 속성을 사용하여 버튼을 누른 효과를 추가할 수 있습니다. CSS transform 속성을 사용하면 HTML 요소를 scale, rotate, move, skew 할 수 있습니다.
먼저 index.html을 만들고 다음의 코드를 입력합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
text-decoration: none;
border: none;
padding: 12px 40px;
font-size: 16px;
background-color: green;
color: #fff;
border-radius: 5px;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
cursor: pointer;
outline: none;
transition: 0.2s all;
}
.btn:active {
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<button class="btn">Button</button>
</body>
</html>index.html을 브라우저로 실행하면 다음과 같은 화면이 나타납니다.
화면의 버튼을 누르면(또는 누르고 있으면) 코드에서 정의한 CSS의 .btn:active 가 활성화 되서 크기를 0.98배로 작게 만들고 그림자를 조금 줄어들게 합니다.
버튼 눌림 효과 주기 2
두 번째 버튼 눌림 효과를 주는 방법으로 CSS의 translate 함수를 사용할 수 있습니다. 이번에는 버튼이 활성화 되었을 때 translateY() 함수를 사용해 보겠습니다. translateY() 함수는 요소의 y 축을 지정한 길이만큼 이동하게 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
padding: 15px 40px;
font-size: 16px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: green;
border: none;
border-radius: 5px;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
}
.btn:active {
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
transform: translateY(4px);
}
</style>
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>위의 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 버튼을 누르면 역시 .btn:active가 활성화 되어 버튼 요소를 y 축으로 4px 만큼 움직여 실제로 눌려진 것과 같은 효과를 내게 됩니다.
정리
'active' pseudo 클래스가 활성화되어 있을 때 다른 메소드를 사용하여 버튼을 클릭할 때 고유한 효과를 만들 수도 있습니다. CSS는 웹 페이지의 기반이며 웹 사이트와 웹 앱을 스타일링하는데 사용됩니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] CSS animation 속성 (애니메이션) (2) | 2022.11.28 |
|---|---|
| [javascript] CSS transition 애니메이션 (타이밍 함수) (1) | 2022.11.25 |
| [javascript] 자바스크립트 삼항연산자 (ternary operator) (0) | 2022.11.17 |
| [javascript] 자바스크립트 특정 문자 모두 바꾸기 (replaceAll) (0) | 2022.10.28 |
| [jquery] 자바스크립트 클래스 이름 지우기 (2) | 2022.10.07 |
댓글