html – Styles like button


Hello! The situation is as follows:

There is a div. It is necessary that it behave with the content inside like a button. That is, so that the text and blocks inside are aligned in the center (vertically and horizontally) and so that when the border is resized, the inner and outer dimensions of the block do not change.

The question may be stupid, but I'm still relatively new to css, so I ask for your help.


.button {
  box-sizing: padding-box;
  display: inline-block;
  padding: 12px 28px;
  background: yellow;
  border: 1px solid lightgray;
  color: black;
  border-radius: 4px;
  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.2);
  font-family: "Helvetica", "Roboto";
<a href="" target="_blank">
  <div class="button">Моя кнопочка</div>
Scroll to Top