[CSS] 버튼 hover 시 스타일 & 애니메이션 효과 주는법 ! ( + slide up 및 그라데이션 효과 )

버튼 hover 시 스타일 & 애니메이션 효과 주는법 ! ( + slide up 및 그라데이션 효과 )

 

 

 

마우스를 요소 위로 올리면 배경색상과 폰트색상이 변화되는 효과를 알아보자 

단순한 배경색상 변화는 기본적이니 그라데이션 효과도 주자!! 

---

html 구조

<div className="sct08-btn">
	<button>자세히 보기</button>
	<button>안내받기</button>
</div>

 

 

 

1. 변화를 줄 요소에 전환 효과를 설정합니다.  

.sct08-btn>button {
    transition: .4s all;
}

.4s  :전환시간 0.4초

all  : 모든 속성에 대해 효과적용

 

해당 요소에 변화가 일어나면 0.4초동안 모든 속성에 대해 부드러운 전환 효과가 적용된다!

 

 

2. hover 효과를 설정합니다. 

 background: linear-gradient(to bottom, transparent 50%, #eee 50%)

linear-gradient : css로 그라데이션 효과를 설정하는 함수입니다.

 to bottom  그라데이션의 방향을 위에서 아래로(지정하지 않으면 to bottom이 기본값입니다.)

transparent 50%  : 그라데이션의 시작점 부터 50%까지는 투명 

#eee 50% : 남은 50 %영역에  그라데이션으로 채워지는 색

 

즉 , 시작점인 최상단에서 50%까지는 투명이고, 나머지 50%는 #eee (반은 투명 반은 #eee)

 

background-size: 100% 200%;

배경의 크기를 설정합니다. 가로 100% , 세로 200%

 

갑자기 왠 background-size 인가 싶은데

배경 그라데이션같은 경우, 그라데이션의 범위를 조절하거나 반복하는데에 사용된다고 한다.

 

세로사이즈는 요소의 2배 높이인 200%로 설정하였는데, 100%만 설정하면 딱 반만 채워진다.

그래서 200%로 설정했는데....... 사실 이부분이 이해가 안간다... 아시는 분은 댓글로 설명 부탁드립니다. 😥

 

background-position: 0 bottom;

배경의 위치를 설정합니다.

가로방향으로 왼쪽 끝에 위치하도록 0 ,

세로방향으로는 아래쪽에 위치하도록 bottom 

 

전체 css 코드

.sct08-btn>button {
    // 기본스타일 
    transition: .4s all;
}


.sct08-btn>button:hover {
    color: black; // 폰트컬러 변경
    background: linear-gradient(to bottom, transparent 50%, #eee 50%);
    background-size: 100% 200%;
    background-position: 0 bottom;
}

 

 

그라데이션 설정 세 코드를 한줄로 줄일 수도 있습니다 

background:  linear-gradient(to bottom, transparent 50%, #eee 50%) 0 bottom/100% 200%;

 

 

---

어렵다... mdn 보고 한건데 이해가 잘안됨... 

 

 

출처

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient