本文由我司收集整编，推荐下载，如有疑问，请与我司联系
关于“幽灵按钮”的一些事
2015/01/10 1401  最近，扁平化UI越来越充斥在我们的生活中，应用了扁平化UI设计思想的东西也是随处可见，而在这种大环境下一个新的名词也就应运而生了：幽灵按钮（Ghost Buttons）。
 幽灵按钮应当算得上是网页前端比较前卫的一种设计了，它的设计思想秉承了扁平化的极简原则，摒弃按钮的复杂背景以及复杂的logo，只是在实现的时候用几个概要的文字，以及几个边框即可完成一个按钮的设计。这种设计的好处就是可以完美的融入到背景中，设计精简，而且很能融入背景。想要凸显按钮也简单，只需把文字颜设计得与背景颜差值较大，或者背景加点模糊即可。既然幽灵按钮这么好，那么就来说说怎么实现吧。
 幽灵按钮的实现很简单，可以是一个a标签，也可是是一个span，或者是一个div，我个人比较喜欢用span，下面就用span来实现一个简易的“幽灵按钮”。
 先是HTML代码：
 div id=“background”  span id=“ghostButton” 幽灵按钮/span  /div  然后相应的加入一些样式，这里就从简了，随便做一个小DEMO，就不考虑美观的问题了。 
一份完整的网页代码和效果图
 pre pre name=“code” #background{ width:300px; height:300px; background-color:#3E7124; #ghostButton{ display: inline-block; padding:5px 10px; border:2px solid white; color:white; position:absolute; top:100px; left:100px; }  上一下效果图：具体应用起来的时候那自然是高大上了，当然这样的做出来的按钮会存在一个小问题，我截图出来给大家看一下：很明显的一个问题，里面的文字会被用户选中，而这种情况会让用户感觉自己点击的不是一个按钮，而是一些文字，虽然说不是功能性问题，但是确实大大的影响客户体验，当然问题列出来就有解决办法，其实也很简单，就是在css样式中插入下面几行代码即可：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。