My Development Notes


Flat button with rounded corners – CSS


Simply do this :

<button> Click Here </button>

In order to make the button appear flat rather than the default look (which is a bit 2D’ish) first specify a background-color to it and then specify the CSS border property to zero.

Note that if you specify the border : 0 without the background-color, the code won’t work as expected. And finally to round the edges of the border use CSS border-radius property. Below is the example :

button {
  background-color: bisque;
  border: 0;
  border-radius: 5px;
}

Copy the codes in your text-editor and see how this works! Output looks like this :


Leave a Reply

Your email address will not be published. Required fields are marked *