[only CSS | button hover effect #1] 버튼 효과 : 가상요소 활용하여 올라오며 채워지기
마우스 오버 시 효과를 css만 사용하여 만들어보겠습니다. html 작성은 아래와 같이 해주세요 태그는 input,a,button 중 아무거나 하셔도 상관없어요. css작성 여기서 position:relative 만 필수로 해주시고 나머지 스타일은 원하시는 대로 작성해 주시면 됩니다. 여기까지 따라 해주시면 아래와 같이 나옵니다. 가상요소 스타일 다음으로는 가상요소를 만들어줍니다. background-color는 자유로이 하시대 나머지는 똑같이 따라 해 주세요. 가상요소(button.up:before)의 부모 = button.up 부모요소의 값을 그대로 따라가기 위해 width, height값을 모두 100%로 해줍니다. 여기까지 따라오셨다면 아래와 같이 나올겁니다. hover 앞전에 부모의 값에서 to..
웹디자인|웹퍼블리셔/CSS
2023. 3. 23. 12:35