近年来，透明按钮作为一种时尚优雅的元素，其地位日益稳固。透明按钮（也称为“空”按钮或“裸”按钮）以其透明特性和极简轮廓为特色，呈现出简洁流畅的美感，能够提升用户体验。接下来，我们将探讨如何使用 CSS 创建透明按钮。

用户体验中关于“幽灵按钮”的考量

幽灵按钮通常以细线勾勒轮廓，内部包含纯文本。它们常被用作行动号召按钮 (CTA)，外观简洁，高对比度吸引眼球，同时为“扁平化”设计注入了新鲜活力。

此外，它们之所以流行，是因为它们设计简洁，有助于打造视觉焦点而不会让用户感到眼花缭乱，并通过保持简洁的用户界面来提升美感。而且，由于它们能够与环境融为一体，因此可以轻松集成到任何设计中。

尽管虚拟按钮有很多优点，但必须谨慎使用。放置不当会导致它们与整体布局过于融合，最糟糕的情况下，甚至会被误认为是输入框。因此，在使用虚拟按钮时务必小心，尤其是在背景图片上，因为它们可能会过于融入背景，导致文本难以辨认。

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

为我们的幽灵按钮搭建结构

使用 CSS 创建“幽灵按钮”的第一步是设置 HTML 结构。在本例中，我们使用 `<div>` 元素<a>作为“幽灵按钮”的基础。它的外观如下：

<a href="https://www.xmhudong.com/" class="elegant-ghost-button" target="_blank">Featured</a>

使用 CSS 设置 Ghost 按钮的样式

下一步是定义幽灵按钮的外观。以下是我们将要使用的 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这些属性指定文本的大小（18px）和字体（“Maven Pro”，无衬线font-family字体），以便按钮标签易于阅读且美观。
• padding: 12px 24px– padding 属性为文本周围提供空间，并定义按钮的尺寸。
• display: inline-block– 此属性确保按钮与其他行内元素正确对齐。
• text-decoration: none– 此属性用于移除通常伴随锚文本的默认下划线。
• transition– 此属性可在鼠标悬停或点击按钮时，使颜色变化在 0.3 秒内平滑过渡。效果引人注目，背景颜色变为白色，文本颜色逐渐变深#1b1f1f。

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

在更实际的场景中，这些属性及其值可能需要调整，以符合您网站的设计主题和功能需求。例如，您可能需要修改按钮的尺寸、颜色、字体属性和过渡持续时间，使其与网站的美学风格保持一致。为了提高在不同设备上的响应速度，您可能需要使用媒体查询，根据视口大小调整内边距和字体大小。最后，对于使用 Flexbox 或 Grid 布局的页面，还需要考虑按钮的大小和位置管理。

 

最后想说的话

幽灵按钮为网页带来极简清爽的设计感，尤其适用于追求简约低调美学的场景。然而，由于其隐蔽性，它们可能不如其他设计元素那样引人注目。因此，将它们作为网页上的主要行动号召（CTA）可能并非最佳策略。

它们在用于辅助或次要操作时往往能发挥出色作用，其低调优雅的设计既能提升整体效果，又不会过于引人注目。例如，它们可以用作导航按钮、表单提交按钮，或作为主要、更醒目的行动号召的补充，作为辅助操作提示。

记住，成功的设计取决于理解并有效运用各种元素。巧妙运用“隐形按钮”可以打造赏心悦目且用户友好的界面。