CSS изогнутая кнопка

Question

Мне нужен контур кнопки, которая изогнута сверху и снизу, но не по бокам.Смотрите пример изображения ниже, чтобы понять, что я прошу.Я буду стилизовать все кнопки на моем сайте, как эта.Я попробовал несколько способов сделать это с помощью border-radius, но пока не добился успеха.Спасибо.

Answer 1

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

.button {
  background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png); 
  background-size: 100% 100%;
}

Я просто публикую его на тот случай, если кто-то с похожими потребностями захочет найти альтернативу.

вот пример: https://codepen.io/dknacht/pen/qKbWaY

Dknacht.

Answer 2

Используйте :before и :after для кнопки

.btn {
  border-top:none;
  border-bottom:none;
  border-right: 2px solid white;
  border-left: 2px solid white ;
  background-color: #273649;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}
body{
  background-color: #273649;
}
.btn:after {
    display: block;
    content: "";
    position: absolute;
    width: 89px;
    height: 16px;
    border-top: white 2px solid;
    top: 48px;
    left: 7px;
    border-radius: 40%;
}
.btn:before {
    display: block;
    content: "";
    position: absolute;
    width: 89px;
    height: 16px;
    border-top: white 2px solid;
    top: 4px;
    left: 7px;
    border-radius: 40%;
}

<button class="btn">Info</button>