Java Vaadin流自定义样式

您好，我正在尝试在

vaadin

组件上定义自定义样式。我有一个带有

样式的html文件，看起来像这样：

<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">


<dom-module id="css-style-example" theme-for="vaadin-button">
    <template>
        <style include="vaadin-button-default-theme">
        .card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 40%;
        }
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
            transform: scale(1.05, 1.05)
        }
        </style>
    </template>
</dom-module>

@HtmlImport("frontend://styles/shared-styles.html")
public class BasePageView extends VerticalLayout { 
    .
    .
    .
    homeButton.setClassName("card");
}

但不知怎的，我不能让这东西工作。我对
css
很陌生，所以请原谅我犯了一些愚蠢的错误

我在github上搜索了一些示例，但我有点迷路了，如果有人能向我解释一下如何准确地定义
样式，比如说，
vaadin
流
按钮
？感谢您的帮助。
请使用用于全局样式的
而不是dom模块（针对vaadin按钮）：

<custom-style>
  <style>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 40%;
    }
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
        transform: scale(1.05, 1.05)
    }
  </style>
</custom-style>


.卡片{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：40%；
}
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,50）；
变换：比例（1.05，1.05）
}

有关Vaadin组件样式的更多信息，请通过阅读以下指南：
以上链接的Vaadin主题混合文档的更新URL为。内容已从wiki移动到自述。目前，旧的wiki页面仍然链接到自述文件，但wiki页面可能在将来被删除。