首页 > 代码库 > 关于“幽灵按钮”的一些事

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

2024-10-31 07:25:02   206人阅读

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

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

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

先是HTML代码：

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

然后相应的加入一些样式，这里就从简了，随便做一个小DEMO，就不考虑美观的问题了。

<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;

通过样式禁止用户选择里面的文字，这样一来，真正意义上的“幽灵按钮”就实现了，当然这种方法只对现代浏览器有用，对低版本的IE浏览器不起作用，这个今天暂时不讨论，有时间可以考虑往下做一些兼容，或者哪位大神实现了告知我一声，我在下面把链接放上去。。
关于“幽灵按钮”的一些事






























        

            
                
                  
                
                

                    联系

                    我们