设计师的想法实现依赖于代码，这也是为什么先有前端，而后有UI。很多时候，为了提高效率，开发者在写前端页面时会采用现成的框架。
一、基本案例BaseExample
二、边框按钮OutlineButtons
也被称作幽灵按钮GhostButton，它看起来是空心的，由一个可识别形状的线框和文字构成，通常与主按钮搭配，用于次要操作，这种按钮有助于设置视觉层次结构。
三、浅色背景按钮LightButtons
四、带图标按钮ButtonswithIcons
在按钮中加入图标会让单调的按钮更加生动，整个页面也会变得活泼。
五、链接按钮LinkButtons
六、社交按钮SocialButtons
七、状态States
常见的按钮状态有6种：Normal,Hover,Active,Focus,Visited，Disabled。
八、按钮字体样式ButtonFontStyles
合理利用大小写的组合可以让文本更加易读，减轻用户的视觉负担。
九、文本按钮颜色ButtonText
十、按钮样式ButtonStyles
十一、尺寸Size
十二、阴影按钮ButtonswithShadow
在设置按钮阴影的颜色时，吸取按钮本身的颜色然后调整其透明度会比黑色阴影有更佳的视觉感受。
十三、悬浮按钮可选颜色HoverButtonOption
十四、透明按钮TransparentButtons
适用于深色背景，按钮的背景吸取文字的颜色并降低其透明度。
本文由@B端交互设计师原创发布于人人都是产品经理。未经许可，禁止转载
THE END