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

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

尝试 bootstrap 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。

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

How to change the size of the button and add back ground color to it?

javascript

css

sharepoint

jquery

sharepoint-2013