关于“幽灵按钮”的一些事

标签：html   ui设计   客户体验   幽灵按钮   

最近，扁平化UI越来越充斥在我们的生活中，应用了扁平化UI设计思想的东西也是随处可见，而在这种大环境下一个新的名词也就应运而生了：幽灵按钮（Ghost Buttons）。

幽灵按钮应当算得上是网页前端比较前卫的一种设计了，它的设计思想秉承了扁平化的极简原则，摒弃按钮的复杂背景以及复杂的logo，只是在实现的时候用几个概要的文字，以及几个边框即可完成一个按钮的设计。这种设计的好处就是可以完美的融入到背景中，设计精简，而且很能融入背景。想要凸显按钮也简单，只需把文字颜色设计得与背景颜色色差值较大，或者背景加点模糊即可。既然幽灵按钮这么好，那么就来说说怎么实现吧。

幽灵按钮的实现很简单，可以是一个a标签，也可是是一个span，或者是一个div，我个人比较喜欢用span，下面就用span来实现一个简易的“幽灵按钮”。

先是HTML代码：

<div id="background">
 <span id="ghostButton">幽灵按钮</span>
</div>

<pre style="font-family: SimSun; font-size: 12pt; background-color: rgb(255, 255, 255);"><pre name="code" class="css">#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样式中插入下面几行代码即可：

user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;

关于“幽灵按钮”的一些事

标签：html   ui设计   客户体验   幽灵按钮   

原文地址：http://blog.csdn.net/u010571913/article/details/42585945