您好,欢迎光临海口高端网站建设公司极简慕枫

您当前位置: 海口网站建设 > 新闻动态 > 龙华网站建设公司:10免费CSS幽灵按钮代码片段

龙华网站建设公司:10免费CSS幽灵按钮代码片段

龙华网站建设公司

几乎每个网站都使用按钮。它们可以用于CTA、基本联系人表单按钮或其他一些东西。

无论如何,你会想要找出你的网站的按钮设计的早期和坚持它。最容易使用的按钮样式之一是鬼按钮,因为它只需要很少的纹理或渐变样式。事实上,它们通常只是平淡的颜色!

如果你喜欢鬼按钮的样式,并想自己尝试一些,那么这个列表就是给你的。下面所有的鬼按钮都是用纯CSS构建的,很容易复制和粘贴到任何Web项目中。

彩色按钮样式

在科德伦,用米密林(@miximan)看到带有CSS3的“笔鬼”按钮。

开发人员Mithicher Baro创造了这些可怕的鬼按钮在几个不同的颜色和大小。这些属性都是通过CSS控制的,这使得它们很容易定制。

你可以选择大按钮,小按钮,方角或圆角。所有的颜色和填充选项都很容易在CSS中更改。

我不得不说,这是我见过的最好的按钮之一。一切都非常容易改变,这个设计非常符合定义。

图标幽灵按钮

参见尼古拉斯(@BoiseDigital)在CodePen上的Pen图标幽灵按钮(@BoiseDigital)。

有时你可能想要在你的鬼按钮图标。当短信还不够的时候,你就会想要这样的东西。

每个按钮都使用来自IcoMoon集的相同图标,但您可以轻松地将它替换为您想要的任何东西。有相当多的免费图标字体在那里使用,他们是惊人的。

使用图标字体,您不必担心裁剪或调整图像大小。你只要在HTML中交换图标的类就行了!你的新图标准备好了。

这些按钮应该是完美的电子邮件注册,下载cta或任何其他需要用户操作。

花哨色彩

参见Simon Goellner(@simeydotme)在CodePen上的Pen FancyButton(@simeydotme)。

开发者SimonGellner在这一包花式纽扣设计中进一步迈出了一大步。

它们都使用自定义渐变样式和Sass代码来操作边框。甚至排版都是用渐变着色的!

在悬停时,你会发现一些美丽的按钮效果与外部发光。这些偏离了用背景色填充鬼按钮的“规范”。这是典型的鬼按钮公式的一个独特的转折,也是这个列表中一个受欢迎的添加。

光明动画

参见笔鬼按钮动画-瓦伦丁漂流(@wintr)上的代码笔。

我还没有看到一个CSS悬停动画,没有给我留下深刻的印象。现在这些按钮没有世界上最漂亮的动画,但它们肯定会吸引你的注意力。

这个想法实际上来自于这张由设计师尼古拉·波波维奇(NikolaPpovic)创作的关于Dribbble的照片。用这支笔,你将得到一个非常相似的外观和感觉原始动画-但动力自定义背景变化和悬停效果。

这是一个真正美丽的风格和最好的动画鬼按钮之一。

梯度鬼按钮

参见CodePen上Alex(@akwright)的钢笔渐变Ghost按钮。

这里还有一个渐变鬼笔,重点放在渐变特性上。注意,默认情况下,这些按钮不具有任何悬停效果。相反,他们专注于生成自定义梯度的方法。

从这些按钮集中,您可以找到3种不同的梯度选项:

  • 盒影梯度
  • 边界梯度
  • 边境图像(无聊!)

当然,图像是最安全的,因为它们通常与传统浏览器最兼容。

但是,您可以使用边框渐变属性来真正地添加任何鬼按钮。这支笔有你开始所需的所有代码。

万圣节按钮

请看CodePen上罗宾的“万圣节幽灵”按钮。

通过这个节日的万圣节按钮,我们真的会在鬼按钮中尝到“鬼影”的味道。

它不使用任龙华网站建设公司何特殊效果,除了一些悬停阴影和发光动画。但是这个按钮最酷的地方是它看起来像个鬼魂。在这些年的网站设计和研究中,我从未见过一个以鬼为模型的鬼按钮。快想想!

这是一个非常酷的CSS项目,它为您自己的按钮提供了一个很好的起点。

反应灵按钮

参见Jae Aquino(@jaevinonaquino)在CodePen上所作的Pen 反应灵按钮(@jaevinonaquino)。

在默认情况下,大多数按钮的设计都是响应性的。但它们通常是流线型设计,根据页面主体的大小进行调整。

如果您签出此响应按钮,您将注意到基于媒体查询的设计大小。这可能是一个更好的方式来处理响应按钮,如果你需要你的布局是像素完美的所有设备。

帕特尔梯度

参见CodePen上CJ Williams(@silencekit sDesign)的钢笔渐变Ghost Button。

这些淡色渐变按钮与其他渐变略有不同。如果仔细观察,您会发现它们没有很多特殊的类或额外的HTML元素。

相反,开发人员CJWilliams使用更详细的背景渐变和透明边框创建了这些按钮。这样,按钮就可以使用它们的内部填充来隐藏主文本后面的背景-但仍然保持边框可见。

这也意味着你可以调整渐变以适应任何你想要的配色方案。如果您可以使用纯CSS制作渐变,那么您可以将它与这些按钮一起使用。

数字播放按钮

参见Cordepen的Joss(@mmMK龙华网站建设公司R)的笔影按钮测试。

这里有一个非常独特的设计-这是使用JavaScript的两个演示之一。这个可玩的鬼按钮依赖于CSS的样式和JS的交互性。

如果您单击该按钮,您可以启动/暂停播放器音频-但只有在它动画进入视图。这是使用JavaScript的另一个重要原因。

这证明,并不是所有的鬼按钮必须是cta或超链接。你可以通过一些创造性的想法,用鬼的风格来构建一些相当酷的特性。

按钮填充动画

参见david stubbs在CodePen上的Pen Button Fill动画(@davekiljoy)。

想给你的鬼按钮添加一些凉爽的悬停效果吗?只看大卫·斯塔布斯的各种填充动画。

这些按钮填充是超级干净,易于操作和完美的任何网站。您可以更改背景和文本颜色以及内部图标。他们基本上是最终的集合按钮悬停效果!

我绝对推荐这个包给任何想要一个漂亮的各种鬼按钮的开发人员。

材料幽灵按钮

参见CodePen上MarcoFugaro(@Marco_fugaro)的钢笔材料设计幽灵按钮。

你可以用谷歌的材料设计风格制作一些令人惊叹的东西。我最喜欢的一些特性是最初为Andr龙华网站建设公司oid手机开发的UX交互和微交互。

你可以在这些鬼按钮中看到一些这龙华网站建设公司些动画。无论何时单击,它们都会根据您单击的位置自动填写样式。它主要依赖于JavaScript,这是我在幽灵按钮中看到的最疯狂的特性之一。

但是,即使你不是一个大材料设计迷,在这个画廊仍然有很多令人满意的眼睛。

上一个:龙华模板网站建设:提高内部设计团队效率10个技巧
下一个:网站建设海口:为自由职业设计师提供10个免费Excel模板