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

我想在两个按钮之间有一个圆圈，并使用CSS在一个按钮上显示半个圆圈，在另一个按钮上显示半个圆圈。我已经搜索过了，但没有任何东西与此相似。我只能用HTML和CSS来做这件事

到目前为止，我能够做到这一点，但圆圈没有显示在右侧按钮上。[我所做的][2]

我已经尝试了我的知识和搜索的一切，但它似乎对我来说是困难的

有什么可能的解决办法吗？我需要一个只使用CSS和HTML的解决方案

.container{
利润率：50像素；
}
.按钮1{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
右边距：5px；
背景：线性梯度（向右，#142f42 50%，#ff511a 50%）；
背景大小：200%100%；
背景位置：右下角；
过渡：全部。5秒放松；
}
.按钮1：悬停{
背景：线性梯度（向右，#142f42 100%，#ff511a 100%）；
背景位置：左下；
}
.text1{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：黑色；
过渡：所有.6秒放松；
显示：块；
}
.text1：悬停{
颜色：白色；
}
.按钮2{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
位置：绝对位置；
底部：-3px；
左边距：5px；
背景：线性梯度（向左，#ff511a 50%，#142f42 50%）；
背景大小：200%100%；
背景位置：左下；
过渡：全部。5秒放松；
}
.按钮2：悬停{
背景：线性梯度（向左，#ff511a 100%，#142f42 100%）；
背景位置：右下角；
}
.text2{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：白色；
过渡：所有.6秒放松；
显示：块；
}
.text2：悬停{
颜色：黑色；
}
.圆圈{
z指数：100；
背景色：#fff；
位置：相对位置；
左边距：-16px；
高度：8px；
宽度：8px；
自我校准：基线；
显示：内联块；
空白：nowrap；
垂直对齐：中间对齐；
填充：0.675雷姆0.75雷姆；
字号：1rem；
线高：1.8；
边界半径：50%；
盒影：0.3rem#c0；
}

命令
命令
这是一条线索

.container{
利润率：50像素；
}
.组按钮{
位置：相对位置；
}
.按钮1{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
右边距：5px；
背景：线性梯度（向右，#142f42 50%，#ff511a 50%）；
背景大小：200%100%；
背景位置：右下角；
过渡：全部。5秒放松；
}
.按钮1：悬停{
背景：线性梯度（向右，#142f42 100%，#ff511a 100%）；
背景位置：左下；
}
.text1{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：黑色；
过渡：所有.6秒放松；
显示：块；
}
.text1：悬停{
颜色：白色；
}
.按钮2{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
底部：-3px；
左边距：5px；
背景：线性梯度（向左，#ff511a 50%，#142f42 50%）；
背景大小：200%100%；
背景位置：左下；
过渡：全部。5秒放松；
}
.按钮2：悬停{
背景：线性梯度（向左，#ff511a 100%，#142f42 100%）；
背景位置：右下角；
}
.text2{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：白色；
过渡：所有.6秒放松；
显示：块；
}
.text2：悬停{
颜色：黑色；
}
.圆圈{
z指数：100；
背景色：#fff；
位置：相对位置；
利润率：-16px；
高度：8px；
宽度：8px；
自我校准：基线；
显示：内联块；
空白：nowrap；
垂直对齐：中间对齐；
填充：0.475rem；
字号：1rem；
线高：1.8；
边界半径：50%；
盒影：0.3rem rgba（192,192,192,0.5）；
}

命令
命令
这是一条线索

.container{
利润率：50像素；
}
.组按钮{
位置：相对位置；
}
.按钮1{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
右边距：5px；
背景：线性梯度（向右，#142f42 50%，#ff511a 50%）；
背景大小：200%100%；
背景位置：右下角；
过渡：全部。5秒放松；
}
.按钮1：悬停{
背景：线性梯度（向右，#142f42 100%，#ff511a 100%）；
背景位置：左下；
}
.text1{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：黑色；
过渡：所有.6秒放松；
显示：块；
}
.text1：悬停{
颜色：白色；
}
.按钮2{
边框：1px纯黑；
边界半径：3px；
宽度：180px；
高度：34px；
显示：内联块；
底部：-3px；
左边距：5px；
背景：线性梯度（向左，#ff511a 50%，#142f42 50%）；
背景大小：200%100%；
背景位置：左下；
过渡：全部。5秒放松；
}
.按钮2：悬停{
背景：线性梯度（向左，#ff511a 100%，#142f42 100%）；
背景位置：右下角；
}
.text2{
文本对齐：居中；
字体大小：16px；
线高：30px；
颜色：白色；
过渡：所有.6秒放松；
显示：块；
}
.text2：悬停{
颜色：黑色；
}
.圆圈{
z指数：100；
背景色：#fff；
位置：相对位置；
利润率：-16px；
高度：8px；
宽度：8px；
自我校准：基线；
显示：内联块；
空白：nowrap；
垂直对齐：中间对齐；
填充：0.475rem；
字号：1rem；
线高：1.8；
边界半径：50%；
盒影：0.3rem rgba（192,192,192,0.5）；
}

命令
命令
您没有正确关闭圆div
是错误的。它使按钮2在圆内渲染。我已经改正了

<