프론트엔드 첫걸음

a 태그가 안에 있는 button의 hover 효과 본문

개발 공부/CSS

a 태그가 안에 있는 button의 hover 효과

차정 2022. 7. 5. 18:29

See the Pen Untitled by JEONG (@cona) on CodePen.

 

 

a {
  /* 밑줄 사라지게 하기 */
  text-decoration: none;
  
  /* 글자 색 */
  color: black;

  /* a 태그의 범위 넓히기 */
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;

  /* a 태그의 세로 정렬 맞추기*/
  display: flex; /*CSS3*/
  align-items: center; /*Vertical align*/
  justify-content: center; /*horizontal align*/

}

 

 

button:hover에서 배경색 변하게 하고,

button:hover a 에서 글자 색 변하게 한다.

 

a:hover{   color:[hover될 때 변하게 할 글자 색]  } 아니라

button:hover a {  color:[hover될 때 변하게 할 글자 색] }

'개발 공부 > CSS' 카테고리의 다른 글

th에 width 다르게 줄 때 th:nth-child(n)  (0) 2022.07.05
[문제해결] border-collapse와 border-radius가 충돌할 때  (0) 2022.07.05
input의 실제 width 는 100% + 20px  (0) 2022.07.05
position의 기능, 가운데 정렬, z-index  (0) 2022.07.04
<body style="margin:0px"> 그리고 CSS reset  (0) 2022.07.04
'개발 공부/CSS' Related Articles more