两个按钮之间的圆圈 - 仅使用 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 class="circle"></div>

.container {
  margin: 50px;
}

.group-button {
  position: relative;
}

.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;
  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: -16px;
  height: 8px;
  width: 8px;
  align-self: baseline;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.475rem;
  font-size: 1rem;
  line-height: 1.8;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem rgba(192, 192, 192, 0.5);
}

<div class="container">
  <div class="group-button">
    <div class="button1">
      <div class="text1">Order</div>
    </div>
    <div class="circle"></div>
    <div class="button2">
      <div class="text2">Order</div>
    </div>
  </div>

Answer 2

你没有正确关闭圆 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>

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

Circle between two buttons - show half circle on one and half on other using CSS only

html

css

shapes