代码之家  ›  专栏  ›  技术社区  ›  John Nobody

灵活的css按钮无图像

  •  0
  • John Nobody  · 技术社区  · 7 年前

    需要你的大脑!!

    我希望制作一个没有图像的按钮,就像CSS3一样,可以根据按钮中的措辞进行缩放。我试过几次,但都没能成功。

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

    这对家或我们来说都很好 但如果我有副本的话 达拉斯市议会团队

    如果按钮能再宽一点就好了。

    有人能帮我吗?漂亮吗?我把自己逼疯了!!!

    提前非常感谢!!!

    2 回复  |  直到 7 年前
        1
  •  0
  •   Jan Nitschke    7 年前

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

        2
  •  0
  •   John Nobody    7 年前

    这就是我最终解决问题的方式。它没有我想要的那么漂亮,但它会起作用的。我在设置最小宽度时遇到了问题,所以我将其全部更改为固定宽度200,因为这是我所有可用的空间。也就是说,如果删除显示:INLINE-BLOCK;它将返回到基于菜单按钮副本的缩放(即使您将宽度: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;
    }