今年一个流行的网页设计趋势是“幽灵按钮”，它只是一个带有边框和透明背景色的按钮。你可以阅读更多关于鬼按钮设计趋势的详细讨论SitePoint而且DesignModo．在本教程中，我将向您展示如何使用CSS创建几种样式的鬼按钮。
幽灵按钮的例子
在我们开始之前，让我们看看一些真实的幽灵按钮的例子:
我们是Heckford
MediaMonks
VIZIO
参考斯夸米什人
图标的公关
利兹渡轮
比赛中臂
dotsprint.co.uk
广场会议
黑&黑斯廷斯
分贝数字
幽灵按钮设计趋势
看看上面的幽灵按钮，我们可以看到它们之间的一些显著的共同点。
- 摄影背景:幽灵按钮在背景照片上看起来很棒。它允许用户通过按钮看到背景图像，这是一种有趣的视觉效果。
- 白色是一种流行的鬼按钮颜色:幽灵按钮可以是任何你想要的颜色，你应该选择适合你的设计项目的外观和感觉的颜色，但压倒性的趋势是给它们一个白色边框和白色文本。
- CSS转换:我们可以使用微妙的CSS转换效果来增强鬼按钮的交互体验。
鬼按钮演示
受我所见过的幽灵按钮的启发，我创造了8种不同的幽灵按钮。你可以在一个页面中看到它们:视图演示
超文本标记语言
在本教程中，我使用了HTML<一>元素来表示虚按钮。
伪按钮textCSS
让我们来看看这8种幽灵按钮的变体，我将其标记为:
- 基本的鬼魂按钮
- 圆角
- 简单的过渡效果
- 厚的边界
- 半透明的褪色
- 边框颜色褪色
- 全彩色消失
- 尺寸过渡效果
1.基本的鬼魂按钮
这是用来创建我们的<一>元素看起来像一个鬼按钮。
.ghost-button{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;边界:1px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;｝这些是基本的CSS属性，它们使鬼按钮看起来像现在这样。在其他变体中，我们只需修改上述属性或添加新属性。
当用户停留或激活幽灵按钮时，应该有一个视觉指示。为了实现这一点，我们将创建悬停和活动状态的样式规则:徘徊而且:主动伪类。
.ghost-button:悬停,.ghost-button:活跃{background - color: # fff;颜色:# 000;｝2.圆角
有些鬼按钮有圆角。这很容易通过添加a来完成这个特性财产。
.ghost-button-圆角{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;边界:1px固体#fff;border - radius: 5 px;text-align:中心;大纲:没有;文字修饰:没有;} .ghost-button-圆角:hover， .ghost-button-圆角:active {background-color: #fff;颜色:# 000;｝
3.简单的过渡效果
为了让鬼按钮更有趣，我们可以在用户悬停或点击它的时候应用一个微妙的过渡效果。在这个变体中，我们使用CSS过渡属性淡出淡出鬼按钮的边框和背景颜色。
.ghost-button-transition{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;边界:2px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:背景色0.2s ease-out，颜色0.2s ease-out;} .ghost-button-transition:hover， .ghost-button-transition:active {background - color: # fff;颜色:# 000;过渡:背景色0.3s ease-in，颜色0.3s ease-in;｝4.厚的边界
在某些情况下，你可能想要一个更厚的鬼按钮，这样它就更重了视觉重量．我们所要做的就是增加border-size属性值从1px到(比方说)3px。
.ghost-button-thick-border{显示:inline-block;宽度:200 px;粗细:大胆的;填充:8 px;颜色:# fff;边界:3px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:背景色0.2s ease-out，颜色0.2s ease-out;} .ghost-button- thickborder:hover， .ghost-button- thickborder:active {background-color: #fff;颜色:# 000;过渡:背景色0.3s ease-in，颜色0.3s ease-in;｝5.半透明的褪色
在这个幽灵按钮变体中，当用户将鼠标悬停在按钮上时，我们允许一些背景图像通过按钮显示出来。这就产生了一种有趣的视觉效果，尤其是当你有一个好的背景图片．我们通过使用。来达到这个效果rgba ()功能:徘徊而且:主动样式规则。
背景和边框的颜色为白色，透明度40%，表示方式如下:
Rgba (255, 255, 255, 0.4)然而,由于rgba ()函数是一个新的CSS特性，并不是所有的浏览器都支持它，所以我们应该使用十六进制表示法来声明纯色。
.ghost-button-半透明{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;边界:2px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:background-color 0.2s ease-out, border-color 0.2s ease-out;} .ghost-button-semi-transparent:悬停，.ghost-button-semi-transparent:active {background - color: # fff;/* fallback */ background-color: rgba(255, 255, 255, 0.4);边框颜色:# fff;/*回退*/ border-color: rgba(255, 255, 255, 0.4);过渡:背景-颜色0.3s ease-in，边框-颜色0.3s ease-in;｝6.边框颜色褪色
在我遇到的一些鬼按钮中，一个流行的过渡效果是将边框和文本颜色淡入另一种颜色。使用CSS很容易做到这一点过渡财产。
.ghost-button-border-color{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;边界:2px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:边框-颜色0.3s ease-out，颜色0.3s ease-out;} .ghost-button-border-color:hover， .ghost-button-border-color:active {颜色:# 66 d8;边框颜色:# 66 d8;过渡:边框-颜色0.4s ease-in，颜色0.4s ease-in;｝7.全彩色消失
对于一个更明显的过渡效果，我们可以用另一种颜色淡出边框和背景。同样，我们使用CSS过渡属性，但这次我们将过渡背景颜色财产。
.ghost-button-全彩{显示:inline-block;宽度:200 px;填充:8 px;颜色:# fff;背景颜色:透明;边界:2px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:颜色轻松0.3秒，背景-颜色轻松0.3秒，边框-颜色轻松0.3秒;} .ghost-button-full-color:悬停，.ghost-button-full-color:active {background - color: # 9363 c4;边框颜色:# 9363 c4;颜色:# fff;过渡:颜色0.3s ease-in，背景颜色0.3s ease-in，边框颜色0.3s ease-in;｝8.尺寸过渡效果
另一种让幽灵按钮动起来的方法是，当用户悬停在它上面时，它会扩大大小，当用户悬停在它外面时，它会缩回来。我们可以很简单地通过添加20px到宽度，高度，行高当用户将鼠标悬停在按钮上时。对于这个转换效果，我觉得我在其他变体中使用的0.3s的转换速度太缓慢了，所以我把数值降低到0.1s来让转换更快。
.ghost-button-size-transition{显示:inline-block;宽度:200 px;高度:25 px;行高:25 px;保证金:0汽车;填充:8 px;颜色:# fff;边界:2px固体#fff;text-align:中心;大纲:没有;文字修饰:没有;过渡:宽度0.3s ease-out，高度0.3s ease-out，行高0.3s ease-out;} .ghost-button-size-transition:悬停，.ghost-button-size-transition:active {宽度:220 px;高度:45 px;行高:45 px;过渡:宽度0.1s ease-in，高度0.1s ease-in，行高0.1s ease-in;｝总结
幽灵按钮的设计趋势目前相当流行。正如您所看到的，使用CSS很容易创建鬼按钮。演示页面的源代码在GitHub上，如果你想查看或下载它:在GitHub上查看源代码在GitHub上下载源代码
