使用文本框创建按钮

了解如何使用几个文本框创建 2 状态按钮。

创建按钮

构建此按钮的第一个任务是添加两个文本框。一个代表活动状态，另一个代表正常状态。

在皮肤编辑器中：

1. 添加一个文本框 。

2. 复制该文本框（复制和粘贴）以将它们堆叠在一起。

3. 在它们周围画一个容器。

4. 给一个 ID 活动，给另一个 ID 正常。

5. 现在，告诉活动文本框，它应该仅在鼠标滚动到它上面时才会出现。在“外观”面板中，取消选择 “可见”，然后向可见属性添加逻辑块 ：

   触发	比较	价值	操作
   将鼠标悬停在父级上	=	真	可见：True

6. 通过更改活动文本框的背景颜色来测试它。打开实时预览并将鼠标悬停在按钮上。它应该会变成你选择的颜色。

添加翻车效果

现在是时候添加一些交互效果了。

1. 选择树中的两个文本框。这允许我们同时向两个文本框添加以下设置。

2. 将背景颜色更改为灰色（或您选择的颜色）。

3. 将文本颜色更改为白色（或其他对比色）。

4. 测试一下。看起来什么都没发生，因为两个盒子是相同的。

5. 添加一些 CSS 以向文本添加阴影以赋予其一些深度。我们将使用 text-shadow。使用 w3schools 中的示例，将以下内容复制到 CSS Styles Inner Element 的普通文本框中：

   text-shadow: 2px 2px #ff0000; 

   这将创建向右 2 像素和向下 2 像素的阴影。#ff0000 是阴影的颜色，即红色。

6. 如果您不想要红色阴影或如此明显的阴影，请将 CSS 更改为 1px 1px 并将 ff 与 00 交换以将颜色更改为黑色。

7. 复制普通按钮的 CSS 样式内部元素并将其粘贴到活动元素中。

8. 将 CSS 更改为 text-shadow: -1px -1px #000000; .负值将阴影角度反转为左 1 像素和向上 1 像素。这产生了缩进的效果。

另请参阅...

• 网络研讨会：造型皮肤元素 。下载项目示例并查看样式元素的工作示例。