[퍼블리싱] 그라데이션 버튼 애니메이션 만들기 - 인크루트웍스 클론하기

 

안녕하세요 찐망고입니다.

이번에 인크루트웍스 클론 프로젝트를 진행하는 학생이 만든 사이트를 보다가 발견한 버튼인데요.

민산스 폰트를 포스팅하게 만든 그 사이트가 맞구요!

마우스오버효과를 주면 버튼 색상이 부드럽게 바뀌는게 너무 예쁘더라구요!

그래서 직접 HTML, CSS, JavaScript로 구현해 보았습니다

 

 

학생이 클론한 사이트 입니다. (3개월 후 삭제예정)

AI로 검증하는 채용솔루션, 인크루트웍스

 

버튼 그라데이션 애니메이션은 영상으로 확인해주세요 (클론한 작업물)

 

마우스를 올리면 위에 그라데이션이 왼쪽에서 오른쪽으로 지나가는 느낌이죠?

그리고 마우스를 떼면 다시 그라데이션이 왼쪽에서 오른쪽으로 또 나옵니다.

지나간다에 포인트를 맞춰버리니까 코드가 안나오는거 있죠?

 

그리고 고민해봅니다.

 

저게 혹시 지나가는게 아니라 줄어들고 늘어나는게 아닌가 하는..

그리고 해답을 찾았죠

 

자 박수

 

일단 HTML구조는 이렇습니다

<div class="top-btn" data-aos="fade-left">
    <a href="#" class="gradient-btn size-btn1">
        <span>패키지 솔루션 추천 받기</span>
        <div class="gradient"></div>
    </a>
</div>

 

CSS는 이래요

.gradient-btn {
  position: relative;  
  display: inline-block;  
  height: 55px;
  border-radius: 6px;  
  background-image: linear-gradient(to right, linear-gradient(to right, #3f80ea, #2ac9a4));
  color: var(--base-white);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.05em;
  overflow: hidden;
  z-index: 10;
}
.gradient-btn .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background-color: var(--incruit-color-blue-60);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  z-index: -1;
}

 

JS도 봐야죠

const buttons = document.querySelectorAll(".gradient-btn");

    buttons.forEach((button) => {
        const gradient = button.querySelector(".gradient");
        button.addEventListener("mouseenter", function () {
          gradient.style.transform = "scaleX(1)" // 왼쪽에서 오른쪽으로 늘어남
          gradient.style.transformOrigin = "left"; // 기준은 왼쪽 설정
        });

    button.addEventListener("mouseleave", function () {
      gradient.style.transform = "scaleX(0)" // 오른쪽에서 왼쪽으로 줄어듬
      gradient.style.transformOrigin = "right"; // 기준을 오른쪽으로 설정
    });
    
});

 

풀어보면,

기본상태

.gradient-btn 자체는 기본 배경색을 그라데이션으로 설정한다.

.gradient 요소는 기본적으로 scaleX(0) 값이 적용되어 있어 눈에 보이지 않는다.

 

마우스를 올리면(Hover)

.gradient 요소가 왼쪽을 기준으로 (transform-origin: left) 점점 커지며(scaleX(1)) 확장된다.
이 과정에서 원래 배경 위를 덮으면서 자연스럽게 왼쪽에서 오른쪽으로 그라데이션이 지나가는 효과가 나타난다.

 

마우스를 떼면

.gradient 요소가 오른쪽을 기준으로 (transform-origin: right) 점점 줄어들며(scaleX(0)) 사라진다.

이때 원래 배경이 다시 보이게 되며, 마치 오른쪽에서 왼쪽으로 그라데이션이 지나가는 것처럼 보이는 효과를 만든다.

transformOrigin이 핵심포인트인데

CSS의 transform-orign은 transform의 기준을 정할 수 있다
디폴트는 center임
transformOrigin: "left"
→ 왼쪽을 기준으로 왼쪽에서 오른쪽으로 확장 (마우스 올릴 때)
transformOrigin: "right"
→ 오른쪽을 기준으로 오른쪽에서 왼쪽으로 축소 (마우수를 뗄떼)

 

이 방식 덕분에 진짜 그라데이션이 지나가는 것처럼 보이지만, 실제로는 크기를 조절하는 것이에요! 😆