css 로 버튼 에니메이션을 주는데요..z-index 로 높이를 못잡겠습니다.
본문
아래와 같은 소스를 실행하면
테스트 라는 버튼에 마우스 오버시 배경 :before 를 에니메이션 시켜주는데요.
근데.. 글씨는 흰색으로 반전을 해야합니다.
이때 :before 의 높이가 text 보다 위에 올려져 있어서 문제인데요.
z-index:-1 로 :before 를 주면 .aaa 요소의 background-color:#dddddd 보다 낮아서 안보이게됩니다.
어떻게 하는게 좋을까요?
<style>
.aaa{display:block;position:relative;color:red;width:200px;height:50px;background-color:#dddddd}
.aaa::before{content:'';position:absolute;left:0;top:0;width:0%;height:100%;transition:all .4s;background-color:#414141;}
.aaa:hover:before{width:100%;}
.aaa:hover{color:#ffffff}
</style>
<a href="" class="aaa">테스트</a>
답변 1
.aaa {
display:block;
color: red;
width:200px;
height:50px;
text-decoration:none;
background: #dddddd;
background-size: 0px 50px;
background-position: 0 100%;
transition: all 0.4s;
}
.aaa:hover {
color: #FFFFFF;
background: linear-gradient(#414141, #414141);
background-size: 200px 50px;
background-repeat: no-repeat;
background-position: left 100%;
}