How to Apply Custom Style over a Button


Hello

I want to change the Color and feel of Normal Button in My APP. I study the Book … it said that we can apply custom css rule over default rule.
The Default rule name for Button is
.v-button
{
/some default rules/
}

I override it as

.v-button-myRule
{
background-color: #FB9337;
color: #F7F8F9;
font-family:‘RobotoCondensed’,Arial,Helvetica,sans-serif;
font-size: 16px;
}
But it is Not Working.

I did it in my custom css file and use it as setTheme(“myCSS”); apply it as myButton.setStyleName(“myRule”);

Basically The default colors of button are grey and has 2px borders.

I want to change the default colors , borders, focus colors and active colors. But I try my best … But No success.

Can any one help me with example.

if my method is Wrong then Please point me to right Direction.
Thanks
Sara J.Sheikh

First thing to check is to inspect the button element. Make sure the stylename
.v-button-myRule
is working properly. Sometimes I have to clear my cache to see css changes.

Messing with things like font inside the button, you might have to use
.v-button-wrap
for it to take effect. I’m pretty new myself but I like to extract the vaadin theme style sheets out of the vaadin.jar and keep them on hand for reference on how the components work with css.

did u tried the addressbook application which is provided by vaadin. they mentioned about the button theming.
pls work it out. hear the link https://vaadin.com/tutorial/

and this is sampler for all the compenent wat vaadin using in the framework. it online demo see its worthy for u.

http://demo.vaadin.com/sampler

Thanks for helping me Guys …
I did not Know what was the Problem But, anyways, By re Creating my custom theme File, from scratch, it magically solved.