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

2021年6月26日 12点热度 0条评论 来源: Sevenwingsfish

最近,扁平化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浏览器不起作用,这个今天暂时不讨论,有时间可以考虑往下做一些兼容,或者哪位大神实现了告知我一声,我在下面把链接放上去。。

    原文作者:Sevenwingsfish
    原文地址: https://blog.csdn.net/u010571913/article/details/42585945
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。