[CSS] 마우스 오버시 버튼 배경이 슬라이드로 채워지는 효과

 

 

 

 

마우스를 올렸을 때 버튼 안으로 배경색이 부드럽게 슬라이드되며 채워지는 효과입니다.

 

 

 

 

 

1. CSS

 

button { position: relative; display: inline-block; padding: 10px 30px; background: #f5f5f5; border:1px solid #000; border-radius: 5px; font-size: 20px; color: #000; cursor: pointer; overflow: hidden; }
button > span { position: relative; display: inline-block; z-index: 1; }
button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #0026dd; z-index: 0; transition: left 0.4s ease; }
button:hover::before, button:focus::before { left: 0; }
button:hover > span, button:focus > span { color: #fff; transition: color 0.2s ease; }

 

 

반응형

 

 

2. HTML

 

<button type="button">
    <span>Click</span>
</button>