Как изменить размер кнопки и добавить к ней фоновый цвет?

Question

Я хочу изменить размер кнопки добавления документа, я изменил размер, но изображение рядом с ним остается прежним.Я также хочу добавить цвет фона, чтобы он больше походил на кнопку.Пожалуйста, порекомендуйте.

Это текущий код, который у меня есть.

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

Для справки: https://imgur.com/a/aGVghc1
Кнопка выглядит следующим образом: https://imgur.com/a/Fi8EQWL

Answer 1

Попробуйте загрузочный 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>

Обновление:

Сценарий применимЗагрузите CSS в элемент span, вы можете использовать инструмент разработчика для проверки совпадений текста (нового документа) и отладки, если вы знакомы с JS.

Answer 2

Нам понадобится пример кода, чтобы помочь вам лучше, я попытался воссоздать кнопку, похожую на изображение, которое вы нам предоставили, так:

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

Если вы используете библиотеку , пользовательские стили могут не действовать, поскольку библиотека вмешивается.

Вы можете проверить с помощью этого образца кода здесь .

Вы можете узнать больше о :hover здесь .

Answer 3

Использование необходимо использовать width, height & background-color.

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