버튼은 다양한 작업을 수행하는 HTML의 기본 부분입니다. CSS를 사용하여 버튼을 디자인하고 스타일을 지정할 수 있습니다. 버튼 색상 지정, 크기 조정, 호버링 등과 같이 버튼을 디자인하는 다양한 방법이 있습니다.

이 기사에서는 먼저 버튼을 생성하는 방법을 배운 다음, 마우스 오버 시 버튼의 색상을 변경하는 방법을 배웁니다.

시작하자!

CSS에서 마우스를 가져갈 때 버튼 색상을 변경하는 방법은 무엇입니까?

CSS에서 ' :호버 '는 호버에서 버튼의 색상을 변경하는 데 사용됩니다. ' :호버 '는 링크, 버튼, 이미지 등과 같은 요소 위에 마우스를 올려 놓을 때 HTML 요소의 동작을 변경할 수 있는 의사 클래스입니다.

구문 :호버 아래에 제공됩니다.

통사론

위에 제공된 구문에서 ' ㅏ '는 ' :호버 ' 은 적용되다. CSS에서는 요소의 색상, 크기 및 너비와 같은 HTML 요소의 호버 동작을 설정할 수 있습니다.

1단계: div 및 버튼 만들기

HTML에서 먼저 div를 만들고

이 있는 제목과 태그를 사용하는 버튼을 추가합니다. 여기서는 버튼의 클래스 이름을 ' btn '로, 버튼 텍스트는 ' 나를 가리켜 '.

HTML

위에서 언급한 코드의 결과는 아래와 같습니다. 제목과 버튼이 생성된 것을 볼 수 있습니다.

이제 CSS로 이동하여 div와 버튼의 스타일을 하나씩 지정합니다.

2단계: 스타일 버튼 및 div

먼저 '를 사용하여 생성된 컨테이너의 스타일을 지정합니다. div '. 그런 다음 div의 높이를 ' 250픽셀 ', 배경색은 ' RGB(199, 173, 192) '. 또한 border 속성을 사용하여 div의 테두리, 너비를 ' 5픽셀 ', 스타일 ' 단단한 ', 그리고 '로 색상을 지정합니다. RGB(40, 2, 55) '.

CSS

아래 주어진 출력은 추가된 스타일이 div에 성공적으로 적용되었음을 나타냅니다.

다음 단계에서는 CSS를 사용하여 버튼의 스타일을 지정합니다.

이제 '를 사용하여 버튼의 스타일을 지정합니다. .btn '를 클릭하여 HTML로 생성된 버튼에 액세스합니다. 그런 다음 ' 없음 '를 border 속성 값으로 지정합니다. 그런 다음 글꼴 크기를 ' 크기가 큰 '에 대한 버튼의 패딩 및 ' 10픽셀 ' 버튼의 내용과 버튼 테두리 사이에 공백을 만듭니다. 결국 우리는 텍스트와 배경의 색상을 ' RGB(50, 0, 54) ' 그리고 ' RGB(193, 54, 135) ':

이제 버튼의 스타일이 변경되었습니다.

또한, 우리는 ' :호버 '를 사용하여 마우스를 가져갈 때 버튼의 색상을 변경합니다.

3단계: 마우스 오버 시 버튼 색상 변경

이제 ' .btn:호버 ' 버튼을 마우스 오버 의사 클래스 요소와 연결합니다. 결과적으로 버튼에 호버가 적용됩니다. 다음으로 버튼의 배경색과 텍스트 색상을 ' RGB(66, 2, 41) ' 그리고 ' RGB(119, 255, 0) '. 다음 색상은 버튼 위에 마우스를 올려 놓으면 버튼에 적용됩니다.

아래에 제공된 출력에서 ​​버튼에 마우스를 가져가면 버튼의 색상이 변경되는 것을 볼 수 있습니다.

그게 다야! CSS를 사용하여 hover 시 버튼 색상을 변경하는 방법을 설명했습니다.

결론

마우스 오버 시 버튼의 색상을 변경하려면 ' :호버 ' 의사 클래스 요소가 사용됩니다. 그렇게 하려면 버튼을 :hover로 연결하고 버튼의 색상을 설정합니다. 이 글에서는 hover 상태에서 버튼의 색상을 변경하는 방법을 설명하고 그 예를 제공했습니다.