![](https://maz.kr/wp-content/uploads/2024/06/howto-css-fading-buttons-thumbnail.png)
w3.css
페이딩 버튼
CSS를 사용하여 페이딩 버튼을 만드는 방법을 알아보자.
마우스를 올리면 페이드 인
1단계) HTML 추가
<button class="button">Click Me</button>
2단계) CSS 추가
.btn { background-color: #f4511e; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; opacity: 0.6; transition: 0.3s; } .btn:hover {opacity: 1}
기본 예시
예제 보기마우스를 올리면 페이드 아웃
예제
<button class="btn">Hover Over Me</button>
2단계) CSS 추가
.btn { background-color: #f4511e; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; opacity: 1; transition: 0.3s; } .btn:hover {opacity: 0.6}
기본 예시
예제 보기마우스를 올리면 배경이 희미해짐
1단계) HTML 추가
<button class="btn">Hover Over Me</button>
2단계) CSS 추가
.btn { background-color: #ddd; border: none; color: black; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; transition: 0.3s; } .btn:hover { background-color: #3e8e41; color: white; }
기본 예시
예제 보기참고
W3C School - How TO - Fading Buttons