html - 两个按钮之间的圆圈 - 仅使用 CSS 在一个按钮上显示半个圆圈，在另一个按钮上显示半个圆圈

Question

circle over two buttons 我想在两个按钮之间有一个圆圈，并使用 CSS 在另一个按钮上显示一个半圆圈。我已经搜索过这个但似乎没有与此相似的东西。我必须只用 HTML 和 CSS 来做这件事。

到目前为止，我能够做到这一点，但 Circle 没有显示在右侧按钮上。[我做了什么][2]

我已经尝试了所有知识和搜索，但对我来说似乎很难。

任何可能的解决方案？我需要一个仅使用 CSS 和 HTML 的解决方案。

.container {
  margin: 50px;
}

.button1 {
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  display: inline-block;
  
  margin-right: 5px;

  background: linear-gradient(to right, #142f42 50%, #ff511a 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}

.button1:hover {
  background: linear-gradient(to right, #142f42 100%, #ff511a 100%);
  
  background-position: left bottom;
}

.text1 {
  text-align: center;
  font-size: 16px;
  line-height: 30px; 
  color: black;
  transition: all .6s ease-out;
  display: block;
}

.text1:hover {
  color: white;  
}


.button2 {
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  display:inline-block;
        
  position: absolute;
  bottom: -3px;
  margin-left: 5px;
        
  
  background: linear-gradient(to left, #ff511a 50%, #142f42 50%);
  background-size: 200% 100%;
  background-position: left bottom;
  transition: all .5s ease-out;
}

.button2:hover{
  background: linear-gradient(to left, #ff511a 100%, #142f42 100%);
  background-position: right bottom;
}

.text2 {
  text-align: center;
  font-size: 16px;
  line-height: 30px; 
  color: white;
  transition: all .6s ease-out;
  display: block;
}

.text2:hover {
  color: black;  
}

			
.circle{
				
  z-index: 100;
  background-color: #fff;
         
  position: relative;
    
  margin-left: -16px;
  height: 8px;
  width: 8px;
  align-self: baseline;
  display: inline-block;
    
  white-space: nowrap;
  vertical-align: middle;
    
  padding: 0.675rem 0.75rem;
  font-size: 1rem;
  line-height: 1.8;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem #c0c0c0;
       
}

<div class="container">
  <div class="button1">
    <div class="text1">Order</div>
  </div>

  <div class="circle" />

  <div class="button2">
    <div class="text2">Order</div>
  </div>
</div>

Answer 1

您没有正确关闭圆圈 div <div class="circle" />是错的。它使按钮二在圆圈内呈现。我已经更正了。

然后我对您的 CSS 进行以下更改:

/* css */
.button2 {
/* remove or unset bottom */
bottom:unset;
/* move button2 to the right */
left: 250px;
}

.container {
  margin: 50px;
}

.button1 {
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  display: inline-block;
  
  margin-right: 5px;

  background: linear-gradient(to right, #142f42 50%, #ff511a 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}

.button1:hover {
  background: linear-gradient(to right, #142f42 100%, #ff511a 100%);
  
  background-position: left bottom;
}

.text1 {
  text-align: center;
  font-size: 16px;
  line-height: 30px; 
  color: black;
  transition: all .6s ease-out;
  display: block;
}

.text1:hover {
  color: white;  
}


.button2 {
  left: 250px;
    
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  display:inline-block;
        
  position: absolute;
  margin-left: 5px;
        
  
  background: linear-gradient(to left, #ff511a 50%, #142f42 50%);
  background-size: 200% 100%;
  background-position: left bottom;
  transition: all .5s ease-out;
}

.button2:hover{
  background: linear-gradient(to left, #ff511a 100%, #142f42 100%);
  background-position: right bottom;
}

.text2 {
  text-align: center;
  font-size: 16px;
  line-height: 30px; 
  color: white;
  transition: all .6s ease-out;
  display: block;
}

.text2:hover {
  color: black;  
}

			
.circle{
				
  z-index: 100;
  background-color: #fff;
         
  position: relative;
    
  margin-left: -16px;
  height: 8px;
  width: 8px;
  align-self: baseline;
  display: inline-block;
    
  white-space: nowrap;
  vertical-align: middle;
    
  padding: 0.675rem 0.75rem;
  font-size: 1rem;
  line-height: 1.8;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem #c0c0c0;
       
}

<div class="container">
  <div class="button1">
    <div class="text1">Order</div>
  </div>

  <div class="circle"></div>

  <div class="button2">
    <div class="text2">Order</div>
  </div>
</div>