使用 CSS 创建幽灵按钮

近年来，幽灵纽扣已经巩固了其作为时尚优雅元素的地位。幽灵按钮（也称为“空”或“裸”按钮）以其透明的性质和简约的轮廓为特点，提供了时尚、干净的美感，可以改善用户体验。下面，我们将探讨如何使用 CSS 创建这样的幽灵按钮。

幽灵按钮的用户体验注意事项

幽灵按钮通常有细线边框，并且内部包含纯文本。它们通常用作 CTA，提供简洁的外观，以高对比度吸引注意力，同时为“扁平”外观提供新鲜感。

此外，它们之所以受欢迎，是因为它们设计简单，有助于创建焦点而不会让用户感到不知所措，并通过保持干净的用户界面来提高美观度。此外，由于它们能够与环境融为一体，因此可以轻松融入任何设计。

尽管幽灵按钮有很多好处，但必须明智地使用。不适当的放置可能会导致它们与整体布局过度融合，在最坏的情况下，它们可能会被误认为是输入字段。使用它们时最好谨慎，尤其是在背景图像上，因为它们可能会落入背景太深并导致文本可读性问题。

现在我们了解了某些 UX 影响，让我们使用 HTML 和 CSS 创建一个。

设置幽灵按钮的结构

使用 CSS 创建幽灵按钮的第一步涉及设置 HTML 结构。在此设置中，我们使用该<a>元素作为幽灵按钮的基础。它看起来是这样的：

<a href="https://deise.cn/designing-engaging-3d-buttons-css/" class="elegant-ghost-button" target="_blank">Featured</a>

使用 CSS 设置幽灵按钮的样式

下一步是定义幽灵按钮的外观。下面是我们将使用的 CSS 代码：

body {
  background: #1b1f25;
}
 
/* Styling our Ghost Button */
.elegant-ghost-button {
    text-align: center;  /* Centers the button text */
    color: #ffffff;  /* Sets text color */
    background: #1b1f25;  /* Matches button background with body background for the 'ghost' effect */
    border: 1px solid #ffffff;  /* Sets a thin white border around the button */
    font-size: 18px;
    padding: 12px 12px;
    display: inline-block;  /* Enables the button to align better with other elements */
    text-decoration: none;  /* Removes the default underline of the anchor text */
    font-family: "Maven Pro", sans-serif;
    min-width: 120px;  /* Ensures a sufficient clickable area */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;  /* Adds a smooth color transition on hover */
}
 
/* Changes color and background on hover to provide dynamic feedback */
.elegant-ghost-button:hover, .elegant-ghost-button:active {
  color: #1b1f25;
  background: #ffffff;
}

最初，body背景颜色设置为#1b1f25深色，与我们的幽灵按钮形成鲜明对比。

然后我们转到.elegant-ghost-button类来定义按钮的外观和行为：

• text-align: center– 此属性用于水平对齐按钮内的文本，有助于视觉平衡。
• color并且background– 该color属性设置为#ffffff，这会产生白色文本。background与身体背景的颜色相同。这有助于创建“幽灵”效果，使按钮看起来与背景融为一体。
• border: 1px solid #ffffff– 此属性用白色细边框勾勒出按钮的轮廓，进一步定义幽灵按钮效果。
• font-size–font-family这些属性指定文本的大小（18px）和字体（“Maven Pro”，无衬线），以实现易于阅读且有吸引力的按钮标签。
• padding: 12px 24px– padding 属性在文本周围提供空间，并定义按钮的尺寸。
• display: inline-block– 此属性确保按钮与其他内联元素正确对齐。
• text-decoration: none– 此属性用于删除通常伴随锚文本的默认下划线。
• transition– 当将鼠标悬停在按钮上或单击按钮时，此属性可以平滑 0.3 秒持续时间内的颜色变化。效果非常引人入胜，背景颜色变为白色，文本颜色变暗为#1b1f1f。

除了按钮的静态属性之外，悬停效果对其交互性也至关重要。选择.elegant-ghost-button:hover, .elegant-ghost-button:active器用于在用户与按钮交互时切换背景和文本颜色，提供按钮可点击的清晰反馈。

在更实际的场景中，这些属性及其值可能需要调整才能与您网站的设计主题和功能要求产生共鸣。例如，您可能需要修改按钮的尺寸、颜色、字体属性和过渡持续时间以符合您网站的美感。为了提高跨不同设备的响应能力，您可能需要使用媒体查询根据视口大小调整填充和字体大小。最后，对于使用 Flexbox 或网格的布局，需要考虑按钮大小和位置的管理。

最后的想法

幽灵按钮为网页引入了简约、简洁的设计，使其在需要简单、低调美感的环境中特别有用。然而，由于其微妙的性质，它们可能不会像其他设计元素那样引人注目。因此，将它们用作网页上的主要 CTA 可能不是最有效的策略。

它们在用于二级或三级动作时通常会闪闪发光，其低调的优雅可以增强整体设计，而不会引起不必要的注意。例如，它们可以用作导航按钮、表单提交按钮或辅助操作提示，以补充主要的、更显眼的 CTA。

请记住，成功的设计取决于在有效环境中理解和应用元素。如果使用得当，幽灵按钮可以打造出视觉上令人愉悦且用户友好的界面。