如何更改按钮的大小并为其添加底色？

Question

我想更改添加文档按钮的大小，我更改了大小，但是旁边的加号图像保持不变。我还想为其添加背景色，使其看起来更像一个按钮。请指教。

这是我当前的代码。

<style>
.ms-addnew {
font-size: 20pt ! important;
}
</style>

https://imgur.com/a/aGVghc1
供参考 按钮外观如下：https://imgur.com/a/Fi8EQWL

Answer 1

使用需要使用width，height和background-color。

.ms-addnew {
  ...
  width: <value>;
  height: <value>;
  background-color: <value>;
}

Answer 2

尝试引导CSS。

演示：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script type="text/javascript">
        $(function () {
            $("span:contains('new document')").addClass("badge badge-primary")
        })
    </script>

更新：

该脚本将bootstrap CSS应用于span元素，您可以使用开发人员工具检查文本（新文档）是否匹配，如果您熟悉JS，则可以对其进行调试。

Answer 3

我们需要一个代码示例来帮助您更好地工作，我尝试重新创建类似于您为我们提供的图像的按钮，

HTML：

<button class='btn-info'>Post your question</button>

CSS：

.btn-info {
  background: #07a3f7;
  color: #fff;

  border: none;
  border-radius: 3px;

  font-size: 18px;

  padding: 15px 25px;
}

.btn-info:hover{
 background: #0572ad;
 transition: 0.8s background;
}

如果您使用的是库，则自定义样式可能不会生效，因为库会干扰。

您可以使用此代码示例here 进行检查。

您可以了解有关:hover here 的更多信息。