In this tutorial I will learn you how to style buttons making full use of css.
Example: Button
You can also make them link somewhere:
Example: Google(links to Google).

Making a button is easy:

Spoiler:

That already makes a button for you.
But mostly this button is very ugly so you can style it.

To get the button just like above paste this code into your HTML:


You can also do it another way.
First paste this in your CSS:

Now just simply paste this in your HTML:

Spoiler:

Let's start from scratch
Paste this in your HTML:

Code:

<button class="button1"> Button </button>

Now let's create the shape, border-radius and border for our button.
Add this to your css:

Code:

.button1 {
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 4px 4px 4px 4px;
}

This creates an output of:
Button
Normal:
Button

Ofcourse we want this button to have a cool background.
To create a cool gradient background you should visit this link. It can create very cool gradient backgrounds.

I chose for this background: (add to your css)

Code:

.button1 {
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 4px 4px 4px 4px;
background: #ff3019;
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

Output:
Button
Normal:
Button

Now let's finalize the button,
adding padding, text-color, box shadow, text shadow. Changing the size of the button.

Add this to the css for .button1:

Code:

padding: 6px 6px;
color: white;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);

Output:
Button
Normal:
Button

---

I hope this helped you a bit on styling your buttons!
Good luck!

Buttons overview

-Blue button
CSS & HTML: Button

Spoiler:

---

-Red button
CSS & HTML: Button

Spoiler: