CODEWITHSUNDEEP
htmlcssstyling
Chris Wathen
Chris Wathen

Reputation: 15

CSS Curved Button

I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.

enter image description here

Upvotes: 0

Views: 749

Answers (2)

user9886608
user9886608

Reputation:

I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.

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

I just post it in case that someone with similar needs wants to have an alternative.

here an example: https://codepen.io/dknacht/pen/qKbWaY

Dknacht.

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Use :before and :after to button

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

Upvotes: 2

Related Questions