How to make a button shaped as rectangle with 2 semi-circles at the side in Javascript?

Question

I am trying to create a button shaped like the below image, and I can't find any easy way to do it, nor does any of the libraries I have searched offers something like this, which is frankly surprising, as I would think that this is a rather common shape. Can anyone teach me how do I do this?

Assuming you have a fixed height of n-pixels you simply set border-radius to n/2 pixels :) Cheers — RNH, Jun 21 '20 at 20:38

score 3 · Accepted Answer · answered Jun 21 '20 at 20:40

All you need is CSS using border-radius.

input[type="button"] {
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid red;
  color: red;
  background: transparent;
}

<input type="button" value="Previous" />

The black outline you might be seeing (when you click the button) is a Chrome feature which can be disabled. This is not something that (to my knowledge) can be fixed with outline-style: none;. Read more about it here.

score 1 · Answer 2 · answered Jun 21 '20 at 20:37

1

The CSS property you are looking for is border-radius

button {
  border: 1px solid black;
  border-radius: 15px;
  padding: 10px 50px;
}

<button>Previous</button>

answered Jun 21 '20 at 20:37

Toxnyc

1,350
7
20

How to make a button shaped as rectangle with 2 semi-circles at the side in Javascript?

2 Answers2