When I insert an img file into the button, it stretches and the text shifts to the lower right corner. What should I do so that the image does not change the size of the button and stays inside it?
HTML:
<div class="navbar">
<div class="smallbutton">
<button class="cob">
<img src="static/img/calend 1.png" alt="">
События</button>
<button>Купить R$</button>
<button>Лотерея</button>
<button>Бонусы</button>
<button>Рефералка</button>
</div>
</div>
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;
}
I have already tried to change the location using padding, margin and “transform: translate”. I also tried to make the button data using the a tag.
Alas, nothing helped. When using width and height, nothing changed, or the buttons overlapped each other.
When resizing, the second button completely fits on the first one.
This is how it should look like:
RoDeZ is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
If you don’t want the buttons to change in height, then give them a height. Also give the img a height to keep it from being bigger than the button.
Finally set the img vertical-align to center to center the text vertically with the image.
Hopefully this gets you close and you can tweak padding’s and sizes to your liking.
See the EDIT comments in the code snippet to see the edit details.
.navbar{
display: flex;
padding: 2em;
}
.smallbutton{
display:flex ;
background-color: #959595;
}
.smallbutton button{
min-width: 158px;
display: block;
/* EDIT Padding was keeping img and text away from ends */
/* padding-right: 40px;
padding-left: 40px; */
/* EDIT You didn't give anything a height */
height: 2.8em;
/* EDIT Don't need the padding now */
/* padding-bottom: 14px ;
padding-top: 14px; */
text-decoration: none;
color: #2B2A2A;
border-radius: 25px;
border-color: #959595;
/* EDIT To closer match your screen shot */
font-size: 1rem;
}
/* EDIT Add */
.smallbutton img {
height: 80%; /* Contain image height with some space */
vertical-align: middle; /* Center's text with text */
} <div class="navbar">
<div class="smallbutton">
<button class="cob">
<!-- EDIT Image path for demo -->
<!-- <img src="static/img/calend 1.png" alt=""> -->
<img src="https://placebear.com/64/64.jpg" alt="">
События
</button>
<button>
<img src="https://placebear.com/65/64.jpg" alt="">
Купить R$
</button>
<button>
<img src="https://placebear.com/66/64.jpg" alt="">
Лотерея
</button>
<button>
<img src="https://placebear.com/67/64.jpg" alt="">
Бонусы
</button>
<button>
<img src="https://placebear.com/68/64.jpg" alt="">
Рефералка
</button>
</div>
</div>