The button component allows images to be embedded in any orientation with respect to the its text label. By specifying a "hoverImage", the image displayed would be replaced by the hoverImage once the button detects a mouse-over event; in this example, blue arrow images are replaced by green arrow images.

<zk>
	<hlayout spacing="35px" height="250px">
		<groupbox vflex="true" closable="false" sclass="z-demo-config">
			<caption label="Default Buttons"/>
			<vlayout width="150px">
				<hlayout>
					<button label="Just Label" hflex="1"/>
					<button iconSclass="z-icon-power-off"/>
				</hlayout>
				<button iconSclass="z-icon-power-off" hflex="1" label="Icon with Label"/>
				<button iconSclass="z-icon-power-off" hflex="1" label="Reversed Order" dir="reverse"/>
				<hlayout>
					<button iconSclass="z-icon-power-off" hflex="1" label="Vertical" orient="vertical"/>
					<button iconSclass="z-icon-power-off" hflex="1" label="Reverse" dir="reverse"
							orient="vertical"/>
				</hlayout>
			</vlayout>
		</groupbox>
		<groupbox vflex="true" closable="false" sclass="z-demo-config">
			<caption label="Button With Image" />
			<vlayout>
				<button label="Left" image="/widgets/input/button/img/ArrowLeft-16x16.png"
						hoverImage="/widgets/input/button/img/ArrowLeftGreen-16x16.png"
						width="125px" />

				<button label="Right" image="/widgets/input/button/img/ArrowRight-16x16.png"
						hoverImage="/widgets/input/button/img/ArrowRightGreen-16x16.png"
						width="125px" dir="reverse" />

				<button label="Above" image="/widgets/input/button/img/ArrowUp-16x16.png"
						hoverImage="/widgets/input/button/img/ArrowUpGreen-16x16.png"
						width="125px" orient="vertical" />

				<button label="Below" image="/widgets/input/button/img/ArrowDown-16x16.png"
						hoverImage="/widgets/input/button/img/ArrowDownGreen-16x16.png"
						width="125px" orient="vertical" dir="reverse" />
			</vlayout>
		</groupbox>
		<groupbox vflex="true" closable="false" sclass="z-demo-config">
			<caption label="Big Button (custom styling)" />
			<button sclass="bigbutton" iconSclass="z-icon-ban" width="200px" height="200px" />
		</groupbox>
	</hlayout>
	<style>
		.bigbutton {
			border-radius: 8px;
		}
		.bigbutton > i {
			font-size: 150px;
			opacity: 0.6;
		}
		.iceblue_c .bigbutton > i {
			opacity: 0.9;
		}
	</style>
</zk>