CSS кнопки, закругленные с одной стороны

Question

Мне нужно создать такую ​​кнопку:

Я думал, что это будет легко сделать, но у меня есть некоторые проблемы с закругленной стороной (слева, справа), и я думаю, у меня тоже будет проблема с добавлением небольшого дополнительного цвета.

Я сделал что-то подобное сейчас (я чувствую, что цвета не совпадают)

.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, но это ужасно.

Вот как это выглядит в моей стороне разработчика:

Спасибо за вашу помощь

Answer 1

Я не уверен, как добавить цвет снаружи, но border-radius позволит вам округлить влево и вправо. Самый простой способ - округлить радиус контейнера:

your-container {
  border-radius: 500px;
  -webkit-border-radius: 500px;
}

Answer 2

В дополнение к border-radius вы можете использовать псевдоэлемент для создания окраски

.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>

Answer 3

Вы ищете различные свойства border-radius, которые можно указать индивидуально.

В частности, вы ищете border-top-left-radius и border-bottom-left-radius на .home_header_buttons .btn_home:first-child и border-top-right-radius и border-bottom-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>