灵活 css 按钮无图像

Question

需要你的大脑！！

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

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

这对于“主页”或“关于我们”非常有用但如果我有这样的副本达拉斯市议会团队

如果按钮能变宽就好了。

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

在此先感谢您！！！

Answer 1

我不完全理解你的问题，但如果你想根据按钮中的文本制作一个按钮 class 比例，你不应该给它任何宽度，只用填充来设计它的样式

Answer 2

这就是我解决问题的方式。它没有我想要的那么漂亮，但它会起作用。我在设置最小宽度时遇到了问题，所以我只是将其全部更改为固定宽度 200，因为这是我可用的所有 space。话虽如此，如果您删除 DISPLAY: INLINE-BLOCK;它将返回到基于菜单按钮副本的缩放比例（即使你将 width:200px; 留在那儿）

我还必须创建 'left menu anchor' 类因为我们所有的链接都是蓝色的并且显示效果不是很好，但这只是一个快速复制、重命名和颜色更改。

感谢大家的帮助！我真的很感激。希望这有助于将来的一些窥视。

.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;
}

灵活 css 按钮无图像

flexible css button no images

css

image

button

resizable