圆形的CSS按钮

时间：2018-09-05 22:52:51

标签： css css3

我必须创建一个像这样的按钮：

enter image description here

我认为这样做很容易，但是在做圆角的一侧（左，右）时有些麻烦，而且我想添加一点额外的颜色也会遇到问题。

我现在已经做了类似的事情（我感觉颜色不一样）

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
}
.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
}
<div class="home_header_buttons">
    <a href="#" class="btn_home">Coaching</a>
    <a href="#" class="btn_home">Order now</a>
</div>

我试图用border-top-lef-radius和border-bottom-left-radius做些事情，但这确实很丑。

这是我开发人员的外观：

enter image description here

感谢您的帮助

3 个答案:

答案 0 :(得分：7)

您正在寻找各种 border-radius 属性，这些属性实际上可以单独指定。

具体来说，您正在寻找.home_header_buttons .btn_home:first-child上的 border-top-left-radius 和 border-bottom-left-radius ，以及 {{3} } 和 border-top-right-radius 放在.home_header_buttons .btn_home:last-child上。

在我的示例中，每个参数的取值为50px，可以在以下内容中看到它：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order now</a>
</div>

要添加颜色，很遗憾，您不能为各个角本身着色（因为这没有意义）。您需要使用border-left-color和border-right-color。这将为边框的边缘着色：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-left-color: blue;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-right-color: green;
}
<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order now</a>
</div>

如果要扩展这些颜色，则需要使用border-top-color和border-bottom-color，但请记住，这将使整个边缘着色：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-left-color: blue;
  border-top-color: blue;
  border-bottom-color: blue;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-right-color: green;
  border-top-color: green;
  border-bottom-color: green;
}
<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order now</a>
</div>

答案 1 :(得分：5)

除了边界半径外，您还可以考虑使用伪元素来创建颜色

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8, 17, 23, .5);
  border: 2px solid #173c3d;
  padding: 30px 60px;
  box-sizing:border-box;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-radius:50px 0 0 50px;
}
.home_header_buttons .btn_home:first-child::before {
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-2px;
  width:70px;
  border: 3px solid red;
  border-radius:inherit;
  border-right:none;
}
.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center, #007278 20%, #0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;  
  border-radius:0 50px 50px 0;
}
.home_header_buttons .btn_home:last-child::before {
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  right:-2px;
  width:70px;
  border: 3px solid blue;
  border-radius:inherit;
  border-left:none;
}
body {
 background:pink;
}
<div class="home_header_buttons">
    <a href="#" class="btn_home">Coaching</a>
    <a href="#" class="btn_home">Order now</a>
</div>

答案 2 :(得分：-1)

我不确定如何在外部添加颜色，但是border-radius将允许您左右舍入。最简单的方法是将容器的半径取整：

your-container {
  border-radius: 500px;
  -webkit-border-radius: 500px;
}
相关问题
最新问题