PDA

View Full Version : Outlook style buttons



smkkiran
21 Nov 2010, 11:27 PM
hey guys....
Im trying to create buttons like outlook style those hav to change the color/bg image onmouse and onclick events ... its looking to be simple but while trying its huge making headache............................any one can help me to solve this:-/

Condor
22 Nov 2010, 1:08 AM
A button already applies x-btn-over and x-btn-pressed classes to the button, which you can use in css rules that assign a different css background image to your button (based on the iconCls you selected).

smkkiran
22 Nov 2010, 2:03 AM
items

:[{

xtype


:'button',

id


:'Documents_btn',

height


:25,

text


:"<div class='Button_div'><p style='word-wrap: break-word;padding-left:10px;'><b>Documents</b></p></div>",

iconCls


:'Documents-icon',
listeners:{
}
}]

//css

.Documents-icon


{

background-image:url(../images/1btn.gif);
background-position:0-3240px;
}


in the above code i want to replace the button as default background image to the new background image but the background image is not changing..............im using same image of different color... it has to change on click...

Condor
22 Nov 2010, 3:43 AM
Use composite css rules:

.x-btn-over .Documents-icon {...}
.x-btn-pressed .Documents-icon {...}