Amazing css buttons examples

Here we are going to cover how to create simple beautiful buttons using the css and css3, below create some examples.

CSS Button Example 1

Here we are creating simple css buttons with background color using the “background-color” property to change the background color of a button.

<style>
.common1 {
    border: none;
    color: #FFFFFF;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
/***** Example 1 *****/
.example1-1 {background-color: #FFD700;} /* Gold */
.example1-2 {background-color: #0000FF;} /* Blue */
.example1-3 {background-color: #FF0000;} /* Red */ 
.example1-4 {background-color: #808080;} /* Dark Gray */ 
.example1-5 {background-color: #000000;} /* Black */
.example1-6 {background-color: #FFA500;} /* Orange */
</style>

// HTML CODE
<input type="button" class="common1 example1-1" value="Example 1">
<input type="button" class="common1 example1-2" value="Example 1">
<input type="button" class="common1 example1-3" value="Example 1">
<input type="button" class="common1 example1-4" value="Example 1">
<input type="button" class="common1 example1-5" value="Example 1">
<input type="button" class="common1 example1-6" value="Example 1">

CSS Button Example 2

Here we are creating simple css buttons with font size using “font-size” property to change the font size of a button.

<style>
.common2 {
    border: #FFFFFF;
    color: white;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.example2-1 {background-color: #FFD700; font-size:10px;} /* Gold */
.example2-2 {background-color: #0000FF; font-size:12px;} /* Blue */
.example2-3 {background-color: #FF0000; font-size:14px;} /* Red */ 
.example2-4 {background-color: #808080; font-size:16px;} /* Dark Gray */ 
.example2-5 {background-color: #000000; font-size:18px;} /* Black */
.example2-6 {background-color: #FFA500; font-size:20px;} /* Orange */
</style>
// HTML CODE
<input type="button" class="common2 example2-1" value="Example 2">
<input type="button" class="common2 example2-2" value="Example 2">
<input type="button" class="common2 example2-3" value="Example 2">
<input type="button" class="common2 example2-4" value="Example 2">
<input type="button" class="common2 example2-5" value="Example 2">
<input type="button" class="common2 example2-6" value="Example 2">

CSS Button Example 3

Here we are creating simple css buttons with rounded corners using “border-radius” property to change rounded corners of a button.

<style>
.common3 {
    border: none;
    color: #FFFFFF;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.example3-1 {background-color: #FFD700; border-radius:6px;} /* Gold */
.example3-2 {background-color: #0000FF; border-radius:9px;} /* Blue */
.example3-3 {background-color: #FF0000; border-radius:12px;} /* Red */ 
.example3-4 {background-color: #808080; border-radius:15px;} /* Dark Gray */ 
.example3-5 {background-color: #000000; border-radius:18px;} /* Black */
.example3-6 {background-color: #FFA500; border-radius:21px;} /* Orange */
</style>

// HTML CODE
<input type="button" class="common3 example3-1" value="Example 3">
<input type="button" class="common3 example3-2" value="Example 3">
<input type="button" class="common3 example3-3" value="Example 3">
<input type="button" class="common3 example3-4" value="Example 3">
<input type="button" class="common3 example3-5" value="Example 3">
<input type="button" class="common3 example3-6" value="Example 3">

CSS Button Example 4

Here we are creating simple css buttons with colored borde using “border” property to change the colored border of a button.

<style>
.common4 {
    color: #000000;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border:4px solid;
    background-color: #FFFFFF;
}
.example4-1 {border-color: #FFD700;} /* Gold */
.example4-2 {border-color: #0000FF;} /* Blue */
.example4-3 {border-color: #FF0000;} /* Red */ 
.example4-4 {border-color: #808080;} /* Dark Gray */ 
.example4-5 {border-color: #000000;} /* Black */
.example4-6 {border-color: #FFA500;} /* Orange */
</style>

// HTML CODE
<input type="button" class="common4 example4-1" value="Example 4">
<input type="button" class="common4 example4-2" value="Example 4">
<input type="button" class="common4 example4-3" value="Example 4">
<input type="button" class="common4 example4-4" value="Example 4">
<input type="button" class="common4 example4-5" value="Example 4">
<input type="button" class="common4 example4-6" value="Example 4">

CSS Button Example 5

Here we are creating simple css buttons effect on mouse hover using “:hover” property to change the style of a button when you move the mouse on it.

<style>
.common5 {
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border:4px solid;
    background-color: #FFFFFF;
}
.example5-1 {background-color: #FFD700; color: #FFFFFF;} /* Gold */
.example5-2 {background-color: #0000FF; color: #FFFFFF;} /* Blue */
.example5-3 {background-color: #FF0000; color: #FFFFFF;} /* Red */ 
.example5-4 {border-color: #808080;} /* Dark Gray */ 
.example5-5 {border-color: #000000;} /* Black */
.example5-6 {border-color: #FFA500;} /* Orange */

.example5-1:hover {background-color: #FFFFFF; color: #000000;} /* Gold */
.example5-2:hover {background-color: #FFFFFF; color: #000000;} /* Blue */
.example5-3:hover {background-color: #FFFFFF; color: #000000;} /* Red */ 
.example5-4:hover {background-color: #808080; color: #FFFFFF;} /* Dark Gray */ 
.example5-5:hover {background-color: #000000; color: #FFFFFF;} /* Black */
.example5-6:hover {background-color: #FFA500; color: #FFFFFF;} /* Orange */
</style>

// HTML CODE
<input type="button" class="common5 example5-1" value="Example 5">
<input type="button" class="common5 example5-2" value="Example 5">
<input type="button" class="common5 example5-3" value="Example 5">
<input type="button" class="common5 example5-4" value="Example 5">
<input type="button" class="common5 example5-5" value="Example 5">
<input type="button" class="common5 example5-6" value="Example 5">

CSS Button Example 6

Here we are creating simple css buttons shadows effect using “box-shadow” property to change the style of a button.

<style>
.common6 {
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border:0px;
    color: #FFFFFF;
}
.example6-1 {background-color: #FFD700; box-shadow: 0 8px 16px 0 #000000;} /* Gold */
.example6-2 {background-color: #0000FF; box-shadow: 0 8px 16px 0 #000000;} /* Blue */
.example6-3 {background-color: #FF0000; box-shadow: 0 8px 16px 0 #000000;} /* Red */ 
.example6-4 {background-color: #808080;} /* Dark Gray */ 
.example6-5 {background-color: #000000;} /* Black */
.example6-6 {background-color: #FFA500;} /* Orange */

.example6-1:hover {box-shadow: none;} /* Gold */
.example6-2:hover {box-shadow: none;} /* Blue */
.example6-3:hover {box-shadow: none;} /* Red */ 
.example6-4:hover {box-shadow: 0 8px 16px 0 #000000;} /* Dark Gray */ 
.example6-5:hover {box-shadow: 0 8px 16px 0 #000000;} /* Black */
.example6-6:hover {box-shadow: 0 8px 16px 0 #000000;} /* Orange */
</style>

// HTML CODE
<input type="button" class="common6 example6-1" value="Example 6">
<input type="button" class="common6 example6-2" value="Example 6">
<input type="button" class="common6 example6-3" value="Example 6">
<input type="button" class="common6 example6-4" value="Example 6">
<input type="button" class="common6 example6-5" value="Example 6">
<input type="button" class="common6 example6-6" value="Example 6">

CSS Button Example 7

Here we are creating a beautiful pure css button on mouse hover.

<style>

.example7 {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.example7 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.example7 span:after {
  content: '  >>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.example7:hover span {
  padding-right: 25px;
}

.example7:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

// HTML CODE
<button class="example7" style="vertical-align:middle"><span>Example 7 </span></button>

CSS Button Example 8

ere we are creating a beautiful mouse pressed css button effect

<style>
.example8 {
    position: relative;
    color: #FFFFFF;
    background-color:#CC3333;
    font-weight: 700;
    font-size: 16px;
    display: block;
    padding: 4px;
    border:0px;
    cursor:pointer;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
    text-align: center;
    
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

.example8:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}
</style>

// HTML CODE
<input type="button" class="example8" value="Example 8">

CSS Button Example 9

Here we are creating animated css button that is called “Ripple Effect” it is work on onclick.

<style>
.example9 {
    position: relative;
    background-color: #0066FF;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.example9:after {
    content: "";
    background: #000000;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.example9:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
<button class="example9">Click Me</button>

CSS Button Example 10

Here we are creating gradient background color button it is work on mouse hover.

<style>
.example10 {
border:0px;
padding:20px 40px;
font-size:20px;
cursor:pointer;
color:#FFFFFF;
font-weight:600px;
background: #006666; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3366FF, #006666); /* For Safari, Crome */
background: -o-linear-gradient(#3366FF, #006666); /* For Opera */
background: -moz-linear-gradient(#3366FF, #006666); /* For Firefox */
background: linear-gradient(#3366FF, #006666); /* Standard syntax */
}

.example10:hover {
background: #3366FF; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#006666, #3366FF); /* For Safari, Crome */
background: -o-linear-gradient(#006666, #3366FF); /* For Opera */
background: -moz-linear-gradient(#006666, #3366FF); /* For Firefox */
background: linear-gradient(#006666, #3366FF); /* Standard syntax */
}
</style>

// HTML CODE
<input type="button" class="example10" value="Example 10">

You Can View Demo and download Source Code of This Tutorial

If You have any question and problem in this code feel free, leave comment below! SHARE WITH YOUR FRIENDS..