css 로 버튼 에니메이션을 주는데요..z-index 로 높이를 못잡겠습니다.

css 로 버튼 에니메이션을 주는데요..z-index 로 높이를 못잡겠습니다.

QA

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%;
}
 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT