[PyQt5, Qt Desinger] QPushButton stylesheet 변경하기(클릭감 만들기)

QPushButton은 말 그대로 버튼으로 보통 클릭하면 어떠한 시그널을 전달하여 어떠한 기능을 작동시킨다.

이중 오늘은 stylesheet를 변경하는 방법을 알아볼 예정이다.

처음에 stylesheet에서 그냥 폰트컬러, 배경컬러만 바꿨더니

커서를 올렸을 때, 클릭했을 때, 그냥 보이는 버튼까지 똑같아서 클릭을 했는지 모르는 상태가 지속되었다. 

(커서가 위에 있던 클릭을 하던 button이 눌리는 감(?)이 없어서 클릭이 되는건지 마는건지 하는 저 상태)

 

이를 해결하기 위해 검색을 해보니,

stylesheet에서 QPushButton 의 상태에 따라 다 다르게 설정하면 된다는 것을 발견하였다.

 

일반 상태

커서를 올렸을 때

버튼 클릭했을 때

이런 식으로 설정을 할 수 있다.

 

아래 스타일 시트를 보면,

1. QPushButton의 기본 설정을 맨 위에 작성한 후,

2. hover(커서를 올린 상태)의 설정을 배경색과 경계색을 변경해주고,

3. pressed(클릭된 상태)의 컬러와 경계색을 변경해주었다.

 

위의 사진과 같이 올리면 기존 색보다 밝아지도록 설정해주었고, 클릭했을 때는 기존 색보다 어두운 색으로 설정하여 클릭감을 느낄 수 있도록 설정해주었다.

 

 

QPushButton{
	font: 14pt "Franklin Gothic Medium";
	background-color: rgb(212, 212, 212);
	border: none;
	boder-radius: 20px;
	
	color: rgb(255, 254, 254);

	border-left: 1px solid rgb(230,230,230);
	border-right: 1px solid rgb(230,230,230);
	border-bottom: 3px solid rgb(230,230,230);
	border-top: 3px solid rgb(230,230,230);

}

QPushButton:hover{
	background-color: rgb(222, 222, 222);
	border-left: rgb(230,230,230);
	border-right: rgb(230,230,230);
	border-bottom: rgb(230,230,230);

}
QPushButton:pressed{
	background-color: rgb(180, 180, 180);
	border-left: rgb(230,230,230);
	border-right: rgb(230,230,230);
	border-bottom: rgb(230,230,230);

}