Кнопка слота с кружком слева и справа

Question

Я пытаюсь создать кнопку в форме слота. Слева или справа на нем есть кружок. Однако я действительно борюсь с шириной и выравниванием текста и круга. Вот что у меня сейчас:

  .Buttons{
  border-style: dotted ;
  border-radius: 150px;
  width: 300x;
  height: 150px;
  margin: 20px;
  background-color:transparent;
  text-align: left;
  position: relative;
  }
  
  .circle {
    width: 140px;
    height: 140px;
    -webkit-border-radius: 140px;
    -moz-border-radius: 140px;
    border-radius: 140px;
    background: green;
  }

  .purple{
  background:purple;
  position: absolute;
  border-radius: 100%;
  left:400px;
  top:3px;
  }
  
    .titelKleur{
  	color:rgb(51,180,231);
    vertical-align: top;
    top: 1px;
    /*position:absolute;*/
  }
  .textKleur{
  	color:rgb(139,139,139);
    font-size:16;
  }

        <button id=button1 value="0" class="Buttons"> 
        	<div id="circle" class="circle"></div>
        	<h1 class="titelKleur">Secure</h1><br>
        	<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
        </button><br>
        
           <button id=button6 value="5" class="Buttons">
           <h1 class="titelKleur">Fast</h1><br>
           <h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
           <div id="circle" class="circle purple"></div>
         </button>

Это в основном то, что мне нравится достигать:

Черновой рисунок краской

Пазы должны иметь одинаковую ширину, а текст должен располагаться по центру по вертикали. Позже я захочу изменить текст, наведя курсор на jQuery, но это будет позже: p

Заранее спасибо! Коэн

Answer 1

Я использовал display: flex на кнопке, чтобы правильно выровнять элементы.

Из вашего вопроса было непонятно, что делать с заголовками. Я установил их по центру вверху.

.Buttons {
  border-style: dotted;
  border-radius: 150px;
  width: 300x;
  height: 150px;
  margin: 20px;
  background-color: transparent;
  text-align: left;
  position: relative;
  display: flex;
}

.circle {
  width: 140px;
  height: 140px;
  border-radius: 140px;
  background: green;
  align-self: center;
  flex-shrink: 0;
}

.purple {
  background: purple;
}

.titelKleur {
  color: rgb(51, 180, 231);
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.textKleur {
  color: rgb(139, 139, 139);
  font-size: 16;
  align-self: center;
  padding: 5px;
}

<button id=button1 value="0" class="Buttons"> 
        	<div class="circle"></div>
        	<h1 class="titelKleur">Secure</h1><br>
        	<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
        </button><br>

<button id=button6 value="5" class="Buttons">
           <h1 class="titelKleur">Fast</h1><br>
           <h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
           <div class="circle purple"></div>
         </button>