你可以在按钮上添加表示颜色的 CSS 类，这样会让按钮有各种颜色 .. 可以是红，橙，黄，绿，青，蓝，紫，粉，灰，黑，褐 .. 在黄跟绿之间还有个橄榄色 ... 蓝跟紫之间有个紫罗兰..

先看一个基本样式的按钮 .. 一个 button 标签，上面加上 ui basic button ，表示这是一个基本的按钮 .. 你会看到这种按钮只会有一个灰色的边框 .. 鼠标放上去的时候，这个灰色边框会变的暗一些 ..

<button class="ui basic button">关注</button>

在这种基本的按钮的上面，我们可以再用一些表示颜色的 CSS 类 .. 比如这里再添加一个 red .. 表示红色 ..

<button class="ui red basic button">红</button>

鼠标放到按钮上面的时候，这个边框会变成红色 .. 可以使用的颜色还有一些 .. 除了红色 .. 这里还有 orange 橙，yellow 黄 .. olive .. 橄榄 .. green 绿 .. teal 青 .. blue 蓝 .. violet 紫罗兰.. purple 紫 .. pink 粉 . grey 灰 .. black 黑 .. brown 褐 .

如果这些按钮在暗色的背景里面，可以在按钮上加上一个 inverted .. 表示反向 .. 先添加一个黑色的背景 ..

div.ui.inverted.segment

再把这些按钮放到里面 .. 然后在它们上面再加上一个 inverted .. 这里按钮的样式会有些变化，比如边框的颜色还有宽度 .. 文字的颜色也更适合在暗色的背景上显示 .. 鼠标放上去 .. 同样会显示对应的颜色的边框 ..

如果去掉这些按钮上的 basic 类，按钮上会直接显示这些带颜色的边框 .. 复制这段代码 ... 选中所有的 basic 类 .. 鼠标指针放到这个类的上面，然后按 command + D .. 可以选中一样的东西 ..

现在按钮的上的文字还有边框都会使用在它们上面应用的那个颜色 .. 鼠标放上去的时候，按钮会显示实心的背景颜色 .. 这些带颜色的按钮，如果不在暗色背景下面显示的话，会直接使用这些颜色作为按钮的背景颜色 ..

复制一下 .. 这里不需要再用这个带黑色背景的容器了 .. 直接复制一下这些按钮 .. 然后去掉这些按钮上的 inverted 类 .. 让它们变成普通的按钮 .. 保存 ..

按钮的背景颜色就是在它们上面使用表示颜色的单词描述的那样 .. 鼠标放到按钮上 .. 会用暗一点的背景颜色 ..