<!DOCTYPE html>
<html>
<style>
.btn-group button {
  background-color: #04AA6D; /* Зеленый фон */
  border: 1px solid green; /* Зеленый border */
  color: white; /* Белый текст */
  padding: 10px 24px; /* Немного отступа */
  cursor: pointer; /* Указатель/значок руки */
  float: left; /* Плавают кнопки бок о бок */
}

/* Очистить поплавки (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Предотвращение двойных границ */
}

/* Добавление цвета фона при наведении курсора */
.btn-group button:hover {
  background-color: #3e8e41;
}
</style>
<body>
<h2>Выровненная группа кнопок</h2>

<p>Две кнопки в группе:</p>
<div class="btn-group" style="width:100%">
  <button style="width:50%">Apple</button>
  <button style="width:50%">Sony</button>
</div>

<p>Три кнопки в группе:</p>
<div class="btn-group" style="width:100%">
  <button style="width:33.3%">Apple</button>
  <button style="width:33.3%">Samsung</button>
  <button style="width:33.3%">Sony</button>
</div>

<p>Четыре кнопки в группе:</p>
<div class="btn-group" style="width:100%">
  <button style="width:25%">Apple</button>
  <button style="width:25%">Samsung</button>
  <button style="width:25%">Sony</button>
  <button style="width:25%">HTC</button>
</div>

for(var j=0;j<document.scripts.length;j++){
      if(document.scripts[j].src===r) return;
    }
    
    k=e.createElement(t),a=e.getElementsByTagName(t)[0];
    k.async=1;
    k.src=r;
    a.parentNode.insertBefore(k,a);
  })(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");

ym(45941085, "init", {
    clickmap: true,
    trackLinks: true,
    accurateTrackBounce: true,
    trackHash: true,
    webvisor: true
  });
</script>
</body>
</html>

Сообщить об ошибке: