带有左右圆圈的插槽按钮

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>

这基本上是我想要实现的目标：

Rough paint drawing

插槽应具有相等的宽度，文本应垂直居中。我后来想通过使用jQuery悬停来更改文本，但是稍后将在：p

谢谢！科恩

Answer 1

我已经使用显示：在按钮上弯曲以正确对齐项目。

您的问题不清楚，标题应该做什么。我把它们放在上面的中央。

.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>