PDA

View Full Version : Button Styles



kiran_e
2 Jan 2013, 8:29 PM
I have created button. I need to change normal, over,disabled style with css any one can give small sample.Including text colors also. Here is is My code

var button=Ext.create('Ext.button.Button',{text:"Button2",renderTo:Ext.getBody()})

mitchellsimoens
4 Jan 2013, 8:27 AM
Give your button a cls so you can target that button. Then you can use that CSS class name to override the different classes that are applied to the button.

kiran_e
5 Jan 2013, 9:50 AM
Thank you for reply,
I did what you say, i reached what i need. But one thing misssing . I can't change on rollover text properties (size, color) . Here is my code can you help me.


<html>
<head>
<title>Buttoncss_jan_03</title>
<meta http-equiv="content-type" content="text/html"/>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<style type="text/css">


.button {
border-color:#EE0000;
font-size: 24px !important;
font-weight: bold !important;
font-family: 'Arial' !important;
border: solid 1px #da7c0c;
background: #ffff00;
}
.button .x-btn-inner {
color:#0000ff;
font-size: 12px !important;
font-weight: bold !important;
font-family: 'Arial' !important;
}
.button.my-over {
background: #00ff00;
font-size: 18px !important;
}
.button.my-disabled{
background: #cccccc;


}
</style>
<script type="text/javascript">
function init(){
Ext.onReady(function (){
Ext.create('Ext.button.Button',{text:"Button2",
id:'button2',
cls:'button',
overCls:'my-over',
disabledCls:'my-disabled',
iconCls:'myIcon',
renderTo:Ext.getBody()})


})


}


</script>


</head>
<body onload="init()"></body>


</html>

Programmers
20 Dec 2013, 7:43 AM
Give your button a cls so you can target that button. Then you can use that CSS class name to override the different classes that are applied to the button.

@mitchellsimoens.......
the answers you can save.
show examples but the code can be used.
The reply of you are amazing ........


by Programmers