如何在Weebly中添加按钮技巧

实际上有一个名为“Buttons”的 Weebly 元素。 这绝对是最重要的元素之一。 例如，任何人都可以添加一个按钮，请求访问者下载 Word 文档。 有时，当您喜欢整个主题但该主题上的按钮可能具有丑陋的样式时，这是很常见的。 在这种情况下，可以很容易地将默认的 Weebly 按钮元素的样式替换为您自己的自定义 CSS 或其他主题的按钮样式。 嗯，这篇文章解释了如何在Weebly中添加按钮技巧

推荐：添加更新Weebly商店信息

如何在 Weebly 中添加按钮

Weebly 有一个随时可用的拖放按钮元素，可以自定义为四种不同类型。 按钮元素分组在元素的“结构”类别下。 默认情况下，用户可以添加两种样式的小按钮和两种样式的大按钮。

在所有非响应式主题上，Weebly 使用图像来创建按钮，在所有响应式主题上，按钮的样式由“main.less”文件控制。

拖放后，单击内容区域上的按钮即可查看以下自定义选项：

• 按钮文本 – 要在按钮上显示的文本。
• 按钮样式 – 选择四种可用样式之一。
• 位置 – 按钮居中、右对齐或左对齐。
• 链接 – 添加按钮文本的链接。
• 间距 – 调整顶部和底部边距。

响应式与非响应式

在尝试更改按钮的样式之前，请检查您当前使用的主题类型。 Weebly 主题上使用三种类型的按钮：

• 响应式主题上的 CSS 按钮 – 例如主题 Slick、Cento。
• 非响应式主题上的 CSS 按钮 – 示例主题 Cleancut。

带有图像按钮的非响应式主题 – 这里按钮元素使用图像，CSS 只是调用该图像作为背景，示例主题是城市。

带有 CSS 按钮的非响应式主题 – 像 Cleancut 这样的主题使用完整的 CSS 按钮，没有图像，尽管它是一个非响应式主题。

响应式主题 – 所有最新的主题，如 Slick、Cento、Paper 等都是完全响应式的，按钮元素是从 CSS 代码生成的。

案例 1 – 在非响应式主题上添加自定义按钮图像

Weebly 按钮元素的重要特征是它能够根据文本长度进行调整。 该按钮将根据输入文本的长度自动调整。 这是通过将按钮分成两个图像来实现的。

在进一步操作之前，请按照以下步骤了解按钮图像存储在 Weebly 站点中的位置。

• 登录您的 Weebly 帐户并选择要编辑的站点。
• 导航 ”主题”选项卡并单击“编辑 HTML/CSS“ 按钮。
• 在下面 ”资产”部分您将看到不同的按钮图像，如下所示：

我们注意到所有使用图像作为按钮的非响应式主题都有 9 组图像（总共 18 个）用于较小和较大的按钮，但使用 CSS 中的 2 个特定图像作为按钮的背景。 检查“main_style.css”并找出用于按钮的图像。 下面的城市主题示例显示“button-highlight.png”和“button-highlight-large.png”分别用于较小和较大的按钮。

如果您不喜欢这些按钮，只需将图像更改为 9 组可用图像之一。 您将“button-highlight.png”更改为“button-purple.png”。 如果您不喜欢任何现有的按钮图像，请创建您自己的具有相似尺寸和分割样式的自定义图像，并将其上传到“资产“ 部分。 确保在“中使用图像的名称main_style.css“ 为了 ”背景“ 财产。

案例 2 – 在非响应式主题上自定义 CSS 按钮

如果您在“”下找不到任何按钮图像资产” 非响应主题部分，然后检查“main_style.css”以查看“纽扣“ 部分。 下面是 Cleancut 主题的 CSS 代码，可以根据需要自定义背景、颜色、悬停效果等。

/* Buttons--------------------------------------------------------------------------------*//* Small structure & regular style */.wsite-button {background: red;background: -moz-linear-gradient(top,#444 0,#333 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333));background: -webkit-linear-gradient(top,#444 0,#333 100%);background: -o-linear-gradient(top,#444 0,#333 100%);background: -ms-linear-gradient(top,#444 0,#333 100%);background: linear-gradient(top,#444 0,#333 100%);border: 1px solid #000;box-shadow:inset 0 0 15px rgba(0,0,0,0.25);-moz-border-radius: 3px;border-radius: 3px;color: white !important;font-size: 13px;font-weight: 700;padding: 3px 25px;text-align: center;text-decoration: none !important;text-shadow: 0px -1px 1px rgba(0,0,0,0.7);}.wsite-button:hover {background-position:0 0;box-shadow:0 1px 4px rgba(0,0,0,0.3);}.wsite-button:active {background-position:0 0;}.wsite-button-inner {color: #fff !important;padding:0;background: none;}.wsite-button:hover .wsite-button-inner {background:none;}.wsite-button:active {padding:4px 25px 2px;}/* Large structure & regular style */.wsite-button-large .wsite-button-inner {font-size:14px;padding:0;}.wsite-button-large .wsite-button-inner {background: none;}/* Highlighted styles */.wsite-button-highlight, .wsite-button-large.wsite-button-highlight {background: #0370EA;background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA));background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%);background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%);background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%);background: linear-gradient(top,#0370EA 0,#0370EA 100%);border: 1px solid #0052ad;box-shadow:inset 0 0 18px rgba(0,0,0,0.02);}.wsite-button-highlight:hover , .wsite-button-large.wsite-button-highlight:hover {box-shadow:0 1px 4px rgba(0,0,0,0.3);}.wsite-button-highlight .wsite-button-inner {background-image: none;}.wsite-button-large.wsite-button-highlight .wsite-button-inner {background-image: none;}

现在返回编辑器并将按钮元素拖到内容区域。 您可以看到该按钮将采用您在“中定义的新样式”少主程序”。