圆形的CSS按钮 [英] CSS Buttons rounded on one side
问题描述
我必须创建一个像这样的按钮:
I have to create a button like that :
我认为这样做很容易，但是在做圆角的一侧(左，右)时会遇到一些麻烦，而且我想添加一点额外的颜色也会遇到问题.
I thought it would be easy to do that, but I have some trouble to do the rounded side (left, right), and I guess I will have problem to add the little extra color too.
我现在已经做了类似的事情(我感觉颜色不一样)
I have made something like that for now (I feel like colors are not the same)
.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做些事情，但这确实很丑.
I tried to do something with border-top-lef-radius and border-bottom-left-radius, but it's really ugly.
这是我开发人员的外观:
Here is how it looks in my dev side :
感谢您的帮助
推荐答案
You're looking for the various border-radius properties, which can actually be specified individually.
具体来说，您正在寻找 border-top-right-radius 和
Specifically, you're looking for border-top-left-radius and border-bottom-left-radius on .home_header_buttons .btn_home:first-child, and border-top-right-radius and border-bottom-right-radius on .home_header_buttons .btn_home:last-child.
在我的示例中，每个值的值都为 50px ，这可以在以下代码中看到:
I've gone with a value of 50px for each in my example, and this can be seen in the following:
.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 .这将为边框的边缘着色:
To add colour, unfortunately you can't colour the individual corners themselves (as this would make no sense). You need to make use of border-left-color and border-right-color. This will colour the very edges of the borders:
.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 ，但是请记住，这将使整个边缘变色:
If you want to extend these colours, you'll need to make use of border-top-color and border-bottom-color, though keep in mind that this will colour the entire edge:
.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>这篇关于圆形的CSS按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
