Для оформления кнопки будем пользоваться доступными в 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 Переключатель во включенном состоянии