버튼은 특정 작업을 수행하는 데 사용되는 클릭 가능한 요소입니다. CSS를 사용하여 다양한 스타일의 버튼을 설정할 수 있습니다. 그 중 하나는 클릭 시 버튼의 색상을 변경하는 것입니다. 버튼의 색상은 CSS '를 사용하여 설정할 수 있습니다. :활동적인 ' 유사 클래스.

이 블로그에서는 클릭 시 버튼 색상을 변경하는 절차에 대해 설명합니다. 이를 위해 먼저 :active 의사 클래스에 대해 알아봅니다.

시작하겠습니다!

CSS에서 ':active'란 무엇입니까?

CSS에서 클릭 시 버튼 색상 변경은 ' :활동적인 ' 유사 클래스. HTML에서는 사용자가 클릭할 때 활성화되는 요소를 나타냅니다. 또한, 마우스를 사용할 때 마우스 키를 누르면 활성화가 시작됩니다.

통사론

' ㅏ '는 :active 클래스가 적용될 HTML 요소를 나타냅니다.

명시된 개념을 이해하기 위해 예를 들어 보겠습니다.

CSS에서 클릭 시 버튼 색상을 변경하는 방법은 무엇입니까?

클릭 시 버튼의 색상을 변경하려면 먼저 HTML 파일에 버튼을 만들고 클래스 이름 ' btn '.

HTML

다음으로 CSS에서 버튼의 색상을 설정합니다. 이를 위해 ' .btn ' 버튼에 액세스하고 버튼의 색상을 ' RGB(0, 255, 213) '.

CSS

그런 다음 버튼에 :active 의사 클래스를 ' .btn:활성 '로 설정하고 활성 상태에서 표시될 버튼의 색상을 '로 설정합니다. RGB(123, 180, 17) ':

그러면 다음과 같은 결과가 표시됩니다.

이제

태그와 버튼 클래스 이름 ' 단추 ', 태그 내부.

HTML

< 센터 >

< h1 > 버튼 색상 변경 < / h1 >

< 단추 수업 = '단추' > 클릭 해주세요 < / 단추 >

< / 센터 >

다음으로 CSS로 이동하여 버튼의 스타일을 지정하고 :active를 적용합니다. 그렇게 하려면 테두리 스타일을 ' 없음 '와 같이 패딩을 제공합니다. 15픽셀 '. 그런 다음 버튼 텍스트의 색상을 ' RGB(50, 0, 54) '와 그 배경을 ' RGB(177, 110, 149) ', 반경은 ' 15픽셀 ':

.단추 {

국경 : 없음 ;

심 : 15픽셀 ;

색깔 : RGB ( 오십 , 0 , 54 ) ;

배경색 : RGB ( 177 , 110 , 149 ) ;

경계 반경 : 15픽셀 ;

}

그러면 다음과 같은 결과가 표시됩니다.

그런 다음 버튼에 :active 의사 클래스를 ' .버튼:활성 ' 버튼의 색상을 ' RGB(200, 255, 0) ':

.단추 : 활동적인 {

배경색 : RGB ( 200 , 255 , 0 ) ;

}

위의 모든 코드를 구현했으면 HTML 파일로 이동하여 실행하여 결과를 확인합니다.

출력에서 버튼을 클릭하면 지정된 RGB 색상 코드에 따라 색상이 변경되는 것을 관찰할 수 있습니다.

결론

CSS에서 클릭 시 버튼 색상을 변경하려면 ' :활동적인 ' 의사 클래스를 사용할 수 있습니다. 보다 구체적으로, 활성화될 때 버튼 요소를 나타낼 수 있습니다. 이 클래스를 사용하면 마우스가 버튼을 클릭할 때 다른 버튼 색상을 설정할 수 있습니다. 이 기사에서는 CSS에서 클릭 시 버튼 색상을 변경하는 절차를 설명했습니다.