●▲■ 개발일기

[CSS] 버튼 클릭 시 애니메이션 효과. (컬러, 사이즈) 본문

👉 css.scss.sass/css

[CSS] 버튼 클릭 시 애니메이션 효과. (컬러, 사이즈)

●▲■ PRINT 2022. 2. 12. 10:38

보통 버튼을 클릭하면 컬러가 바뀌거나 버튼 사이즈가 변한다.

커서가 손가락 모양으로 바뀌는 건 cursor: pointer; 를 적용하면 되지만

버튼 배경색이 변한다거나, 버튼 사이즈가 커졌다 작아졌다 하는 건 CSS로 적용해줘야 한다.

 

 

.클래스명:active {변경하고 싶은 스타일;} 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼 클릭 시 효과</title>
</head>
<style>
  body {
    width: 100%;
    height: 100vh;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn--test--01 {
    transition: all .25s;
    width: 30%;
    height: 10rem;
    padding: 3rem;
    background: #ff9100;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn--test--01:active {
    background-color: rgba(255, 230, 0, 0.8);
  }

  .btn--test--02 {
    transition: all .25s;
    width: 30%;
    height: 10rem;
    padding: 3rem;
    background: #ff9100;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn--test--02:active {
    background-color: rgba(145, 255, 0, 0.8);
  }
</style>

<body>
  <div class="btn--test--01">
    버튼 클릭 테스트 01
  </div>

  <div class="btn--test--02">
    버튼 클릭 테스트 02
  </div>
</body>

</html>



'👉 css.scss.sass > css' 카테고리의 다른 글

[CSS] flex: 1에 관한 예제  (0) 2025.04.08
[CSS]버튼 클릭하면 박스가 나타나면서 아래 박스 부드럽게 밀어내리는 애니메이션 CSS  (0) 2022.04.29
[CSS] display: none 애니메이션 적용하기 (fade in, out)  (0) 2021.12.28
'👉 css.scss.sass/css' Related Articles more