Для оформления кнопки будем пользоваться доступными в Qt CSS стилями.
Прежде всего создайте новый проект и поместите на него кнопку. Примерно вот так:
Я убрал и текст кнопки, т.к. я буду использовать заранее заготовленные изображения для её фона.
Теперь кликните правой клавишей по кнопке и нажмите «Изменить styleSheet». В появившемся окне можно приступать к редактированию свойств кнопки. Для начала уберём стандартный фон и границу. Все изменения делаются в конструкции:
#имя_объекта {
свойство: значение;
...
}
В нашем случае (если вы конечно не меняли имя кнопки) :
#pushButton {
border: none;
background-image: url(/wp-content/uploads/button.png);
}
Этим стилем я убрал границу и добавил фоновое изображение, которое находится в файле /wp-content/uploads/button.png.
Теперь приступим к редактированию кнопки при наведении курсора и её нажатого состояния:
/* при наведении курсора */
#pushButton:hover{
background-image: url(/wp-content/uploads/hover_b.png);
}
/* при нажатии кнопки */
#pushButton:pressed {
background-image: url(/wp-content/uploads/presed_b.png);
}
Для редактирования стиля выключеной кнопки используйте селектор:
#pushButton:disabled
В указанных примерах я всего лишь меняю фоновые изображения кнопки. Вы можете задать градиенты, цвета, изменить шрифт и пр.
зы вот список возможных состояний кнопки:
- :checked Кнопка выбрана
- :disabled Кнопка выключена
- :enabled Кнопка включена
- :focus На кнопке фокус
- :hover Указатель мыши над кнопкой
- :pressed Кнопка нажата
- :unchecked Кнопка не выбрана
Для кнопки переключателя (toggle) :
- :off Переключатель вы выключенном состоянии
- :on Переключатель во включенном состоянии
