How to display button as a link in vaadin

Question

I am new to vaadin. I have one button it should look like a link. I have created button like,

Button title = new Button(item.getSubmissionTitle());                           

title.setStyleName(BaseTheme.BUTTON_LINK);

I also tried using

title.setStyleName("link);

but still I am getting look and feel of button. Is there any way to change the button using css Or any alternative ways by wich the button should appear as a link.

EDIT

I just found out The button is getting css from Table. And overriding the button style. For table, it has written

table.setDebugId("submissionsTable_id");

css for button in table is:

#submissionsTable_id .v-table-cell-wrapper .v-button-caption{white-space:normal !important;text-decoration:none;}

#submissionsTable_id .submission-content{width:350px;}

#submissionsTable_id .v-table-cell-wrapper .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}
#submissionsTable_id .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}

Now, How can i exclude my Link button to override the table's style or how can I add new style to button which should not inherit the style of the table.

Answer 1

A future reference for anyone else with this issue. According to the Book of Vaadin online: https://vaadin.com/book/vaadin7/-/page/components.button.html#figure.component.button.basic

Some built-in themes contain a small style, which you can enable by adding Reindeer.BUTTON_SMALL, etc. The BaseTheme also has a BUTTON_LINK style, which makes the button look like a hyperlink.

If you are using the Reindeer theme the code would be:

title.setStyleName(Reindeer.BUTTON_LINK);

Answer 2

No need to play with the Button; there is a Link component for this.

@Override
protected void init(VaadinRequest vaadinRequest) {

    HorizontalLayout layout = new HorizontalLayout();

    Link link = new Link("Go to stackoverflow.com",
            new ExternalResource("https://stackoverflow.com/"));

    layout.setMargin(true);

    layout.addComponents(link);
    setContent(layout);
}

Answer 3

Apparently resetting styles for a particular element is not possible, according to this post. You have to selectively overwrite the css properties for that element in order to simulate the aspect of a link.

If it's any help, the following is some CSS I scrounged up that simulates to some degree the look and behaviour of a link:

a:link {
color: #0000FF;
background-color:#FFF;
text-decoration:underline;
}    

a:visited {
color: #800080;
background-color:#FFF;
text-decoration:underline;
}

a:hover {
color: #0000FF;
background-color:#FFF;
text-decoration:none;
}   

a:active {
color: #FF0000;
background-color:#FFF;
text-decoration:none;
} 

Note that the default look and behavior of a vanilla link depends on the browser its viewed in.