Hi,
i am not really good at CSS thinks and i googled alot, but i didn’t found my Problem there, as i need it.
The question was asked alot, how to change a Button design, but i do not want to change all my buttons.
I want to to a navigationbar with Buttons and only they shell have a own style.
I an other other thread i found this (didn’t found the link for qouting, syr).
@mixin navigatorprojecttheme-button {
.v-button {
background-image: none;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background-color: #f9f9f9;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
text-decoration: none;
text-shadow: 1px 1px 0px #ffffff;
}
.v-button:hover {
background-color: #e9e9e9;
}
.v-button:focus {
background-image: none;
background-color: #e9e9e9;
}
.v-button:active {
background-image: none;
background-color: #e9e9e9;
}
.v-button-wrap {
background-image: none;
}
.v-button-wrap:focus {
background-image: none;
}
.v-button:hover .v-button-wrap {
background-color: #e9e9e9;
}
.v-button:focus .v-button-wrap {
background-image: none;
background-color: #e9e9e9;
}
.v-button:active .v-button-wrap {
background-image: none;
background-color: #e9e9e9;
}
}
This works perfectly, but change the design of all buttons.
What changes to i have to do on the CSS, if i only want to change my navigation Buttons.
My Code for the Button is this:
private VerticalLayout navigationLayout = new VerticalLayout();
Button addButton = new Button("AddTestButton");
addButton.setStyleName("navigation");
addButton.addClickListener(new ClickListener(){
@Override
public void buttonClick(ClickEvent event) {
//Do something
}
});
navigationLayout.addComponent(addButton);
Thank you for your help, getting this to work.
greetings Michael