Изображение растягивает кнопку или выходит за ее рамки ⇐ CSS

[Anonymous]

Когда я вставляю в кнопку файл img, он растягивается и текст смещается в правый нижний угол. Что делать, чтобы изображение не меняло размер кнопки и оставалось внутри нее?
HTML:

Код: Выделить всё

[img]static/img/calend 1.png[/img]
События
Купить R$
Лотерея
Бонусы
Рефералка

CSS:

Код: Выделить всё

.navbar{
display: flex;
padding: 2em;
}

.smallbutton{
display:flex ;
background-color: #959595;
}

.smallbutton button{
min-width: 158px;
display: block;
padding-right: 40px;
padding-left: 40px;
padding-bottom: 14px ;
padding-top: 14px;
text-decoration: none;
color: #2B2A2A;
border-radius: 25px;
border-color: #959595;
}

Я уже пытался изменить местоположение, используя отступы, поля и «трансформировать: перевести». Я также пытался сделать данные кнопки с помощью тега a.
Увы, ничего не помогло. При использовании ширины и высоты ничего не менялось, либо кнопки накладывались друг на друга.
При изменении размера вторая кнопка полностью помещается на первую.
Вот как это должно выглядеть:

Подробнее здесь: https://stackoverflow.com/questions/793 ... -its-frame