灵活的css按钮没有图像答案

【问题标题】：flexible css button no images灵活的css按钮没有图像
【发布时间】：2017-12-05 23:16:47
【问题描述】：

需要你的大脑！！

我希望制作一个没有图像的按钮，就像 CSS3 一样，它将根据按钮中的措辞进行缩放。我已经尝试了一些事情，但我无法让任何工作。

例如：按钮的最小宽度为 95px

这非常适合 HOME 或 ABOUT US 但如果我有这样的副本达拉斯市议会团队

如果按钮能变宽就好了。

谁能帮我解决这个问题？请问漂亮吗？我把自己逼疯了！！！

提前非常感谢您！！！

【问题讨论】：

嘿，你能发布你的代码并说明你已经尝试过的事情吗？
@MichaelEvans 好吧，我正试图通过在线查看各种代码来解决这个问题。我找到了这段代码，并让它工作——尽管——按钮真的很大！但是当添加额外的文本时它的大小不会增加。（代码太长 - 它不会让我把它放在这里）这是按钮的代码。
无图像但无缩放！！
这是一个查看当前“正在测试”的页面。 orders.modassystems.com/sample-form
好的 - 所以我在发送给您的示例链接的正面添加了代码。论坛不会采取一些长行格式的方式。我一直在尝试粘贴时出错。

标签： image css button resizable

【解决方案1】：

我不完全理解您的问题，但如果您想根据按钮中的文本制作按钮类缩放，您不应该给它任何宽度，只需使用填充设置样式

【讨论】：

好吧，我希望至少有一个按钮的最小宽度 - 这样我就可以尝试将它放在给定的区域中。我会将我必须的代码添加到原始帖子中。

【解决方案2】：

这就是我最终解决问题的方式。它不像我想要的那样漂亮，但它会起作用。我在设置最小宽度时遇到了麻烦，所以我将其全部更改为固定宽度为 200，因为这就是我可用的所有空间。话虽如此，如果您删除 DISPLAY: INLINE-BLOCK;它会根据菜单按钮副本返回缩放（即使您将 width:200px; 保留在其中）

我还必须创建“左菜单锚”类，因为我们所有的链接都是蓝色的，而且显示得不是很好，但这只是一个快速复制、重命名和颜色更改。

感谢大家的帮助！我真的很感激。希望这对未来的一些人有所帮助。

.left_menu_btn_css {
  background: #39a7f0;
  background-image: -webkit-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -moz-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -ms-linear-gradient(top, #39a7f0, #2979ab);
  background-image: -o-linear-gradient(top, #39a7f0, #2979ab);
  background-image: linear-gradient(to bottom, #39a7f0, #2979ab);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  width: 200px;
  display: inline-block;
}

.left_menu_btn_css:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

【讨论】：