Creating CSS3 button with rounded corners

This article explains how to create a button with rounded corners using only CSS3.

The following styles are essential for creating this kind of button.

.button {
  display: inline-block;
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: bold;
}

HTML:

<a href="#" class="button">Nice button!</a>

Following styles are divided into small groups to show how each group changes the appearance of the button. It must clearly demonstrate how each CSS property works.

Pay attention, the last example of the button in the left column is a result of applying all four styles from the right column. If you want to add changes to the appearance of the button, add not just the corresponding code situated on the right side, but also all the previous codes above it. 

background-color: #1ABFE5;

text-shadow: 0 -1px 1px #565656;

-webkit-border-radius: 7px;
border-radius: 7px;

-webkit-box-shadow: 0 1px 3px 0 #565656;
box-shadow: 0 1px 3px 0 #565656;

Here are all styles for the button:

.button {
  display: inline-block;
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  background-color: #1ABFE5;
  text-shadow: 0 -1px 1px #565656;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 0 1px 3px 0 #565656;
  box-shadow: 0 1px 3px 0 #565656;
}

It will look much better if the button changes color when hovered upon.

.button:hover {
  background-color: #1397B5;
}

Probably the only thing that might need some changes in this button, is its colour:

background-color: #FC9F13;

background-color: #0182C4;

background-color: #C8312D;

background-color: #FF7FED;