Awesome Rounded corner Button with simple HTML and CSS

First I will provide the code and then I will explain about the important things in the code.

buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<button id="buttonType">Button tag Button</button><br><br>
   </div>

</body>
</html>

buttons.css
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:transparent;
color:#9037cf;
font-family:calibri;
font-size:20px;
border:1px solid #9037cf;
border-radius:10px;
-webkit-transition:background .3s,color .3s;
-moz-transition:background .3s,color .3s;
-ms-transition:background .3s,color .3s;
-0-transition:background .3s,color .3s;
transition:background .3s,color .3s;

}
#buttonType:hover{
cursor:pointer;
background:#9037cf;
color:#ffffff;
}

/*Button Type Button Styling End*/

output

I hope you can pretty much understand the above code. Let me explain about transition property.
transition is CSS3 property used to animate simple things. Here we have made different transition lines with different suffixes that is because for the cross browser compatibilities.

If any queries comment below. I will answer for each query.

Create Buttons with different tags in html

In HTML you can create Awesome buttons with different tags. Here are some tips and styling tricks to make your buttons looks pretty.

buttons.html

<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<a href="#" id="linkBtn">Link Button</a><br><br>
<div id="divBtn">Div Button</div><br>
<button id="buttonType">Button tag Button</button><br><br>
<input type="submit" value="Submit type button" id="submitType">
    </div>
</body>
</html>

buttons.css

/*Link Button Styling*/
#linkBtn {
text-decoration:none;
padding:6px;
background:#00bbaf;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
/*Link Button Styling End*/

/*Div Button Styling*/
#divBtn {
width:200px;
text-align:center;
padding:6px;
background:orange;
font-family:calibri;
font-size:20px;
color:#ffffff;
}
#divBtn:hover {
cursor:pointer;
}
/*Div Button Styling End*/

/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:red;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid red;

}
#buttonType:hover{
cursor:pointer;
}
/*Button Type Button Styling End*/

/*Submit Type Button Styling End*/
#submitType {
padding:6px;
background:green;
color:#ffffff;
font-family:calibri;
font-size:20px;
border:1px solid green;
}
#submitType:hover{
cursor:pointer;
}
/*Submit Type Button Styling End*/

Buttons look like this 

Stay tuned for more tips and tricks.