Custom Buttons, but not global

Flow
1

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

2

setPrimaryStyleName is soluction for your problem.

You have to create like this:


@include base-button($primaryStyleName: my-button);
.my-button {
    color: red;
}

Read
this
 tutorial that explains in depth component customization.

3

Thx, that did the job =D