<button class="button">
  <div onclick="foo()" class="true__burron">Начало, текст кнопки</div>
  <div class="unclickable">не кликабельный текст</div> 
  <div onclick="foo()" class="true__burron"> конец текста кнопки.</div>
</button>
<div id="logs"></div>

.button {
  appearance: none;
  display: flex;

  border: 2px solid rgb(245,245,245);
  border-radius: 2px;
  cursor: pointer;
  
  width: fit-content;

  margin: 0;

  background: transparent;

  color: rgb(140,140,140);
}

.button:hover,
.button:focus {
  color: rgb(40,40,40);
  border: 2px solid rgb(235,235,235);

}

.button > .true__burron {
  margin: auto;
  padding: 8px 16px;
}

  .button:focus {
    outline: 0;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08);
  }

.unclickable {
  display: inline-block;
  cursor: default;
  margin: 4px 0;
  border-radius: 2px;

  background: rgb(245,245,245);

  padding: 4px 8px;  
}

function foo() {
    logs.innerHTML += '<p>Нажато</p>'
};