CSS to customize button?

Question

How to I can customize the buttons of vaadin ? I'm trying to set height and width but doesn't work and I try align an image on center of button also and doesn't work.

I'm trying this.

/** css file styles.scss */
.myButton{
       width:60px;
       height:60px;
       border:none;
       text-align:center;
}

/** my button */
Button btnMyButton = new Button();
btnMyButton.setIcon(new ThemeResource("../icons/myicon.png"));
btnMyButton.addStyleName("myButton");

any idea ?

You just want to set height, width and an image? Aren't texts already centred? — nexus, Jan 24 '14 at 17:43
I want to set height and width of button and centralize the icon(image) — FernandoPaiva, Jan 24 '14 at 17:49

nexus · Accepted Answer · 2014-01-24T18:44:58.330

1

Creating a button having just an icon is quite easy. If you want hover effects it's getting tricky, therefore you should use the NativeButton.

Button btnLogout = new Button();
btnLogout.setIcon(new ThemeResource("icons/logout.png"));
btnLogout.addStyleName(Reindeer.BUTTON_LINK); // define it as a link button => no borders, just the icon. Every theme has this style-name.
btnLogout.setDescription("Logout"); // set hint

edited Jan 24 '14 at 18:44

answered Jan 24 '14 at 18:34

nexus

2,937
3
17
22

yep, I did this. There's some way to set border ? example: .v-button{border:1px solid black;} ? – FernandoPaiva Jan 24 '14 at 18:41

CSS to customize button?

1 Answers1