按钮

常规的按钮

点击我

默认情况下，按钮没有背景色;这是用特定颜色的helper类设置的。在本例中，河流蓝绿色被指定为'tealbg'。点击这里查看所有颜色辅助类。

中空的按钮

与所有按钮一样，您可以添加“半径”来圆角。可供选择的颜色是:

蓝空 蓝-空 绿-空 黄-空 白-空

合适的按钮颜色

按钮不应与Call-to-Action按钮(cta)冲突。所有页面都有主cta(黄色)在粘性导航(桌面/平板电脑)或侧面导航(移动)中。此外，一些页面将有二次cta(橙色)左侧导航下方。

在为你的纽扣选择颜色时，要保持一致。该页面上的所有按钮都使用这种颜色，如果可能的话，你的网站也要使用这种颜色。在适当的情况下，例如:在彩色背景上，选择一个有意义的颜色。

可供选择的颜色是:

• tealbg
• bluebg
• tealbg-dark
• powderbg

tealbg  tealg -dark bluebg powderbg

没有图标

Button tealbg nobg

开放学习按钮

开放学习有一个稍微不同的调色板，因此有不同的按钮选项。

greenbg

链接到文件的按钮

当使用按钮链接到一个文件时，请确保有足够的对比度，以使文本易于阅读。为了确保有足够的对比，只使用浅灰色作为按钮的颜色。

点击我 点击我 点击我 点击我

按钮组

可以创建按钮组来将相似的链接聚集在一起。

• 链接1
• 链接2
• 链接3

李< ul类= "按钮组“> < > < a href = " # " class = "按钮tealbg”>链接1 < / > < /李> <李> < a href = " # " class = "按钮tealbg”>链接2 < / > < /李> <李> < a href = " # " class = "按钮tealbg”>链接3 < / > < /李> < / ul >

按钮之间的空格已被'nomargin'类删除。此外，该组已被四舍五入，'radleft'和'radright'类分别添加到第一个和最后一个按钮。在这里查看所有的半径helper类。

• 链接1
• 链接2
• 链接3

 
Link 1
 
Link 2
 
Link 3
 

次要行动呼吁

次要的行动号召是左边栏中的大按钮，位于主要部分导航的下方。它们不能在纸面上使用。

cta必须有两行文本才能正确对齐。

 
 
查看所有
程序
 
探索我们的
课程
 
录取< /li> 
 

 
 
查看所有
课程
 
探索我们的
课程
 
录取
要求
 
 

带有图标的按钮

要使用带有图标的按钮，请使用“navBox”和“navItems”类。

• 
  校园之旅

 
 
 
   
Campus Tours