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" />是错误的。它使按钮2在圆内渲染。我已经纠正了。

然后我对您的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在一个按钮上显示半个圆圈而在另一个按钮上显示另一半

2 个答案: