How to make beautiful buttons using css

Buttons and links always plays a usefull role in websites. Making beautiful buttons using css is simple just use below css code and use these colourfull buttons in your website. and also learn how to make beautiful buttons using css

CSS CODE

.button1
{
background: #e570e7;
background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3));
background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: -o-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: -ms-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 );
display:inline-block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:solid 2px #7a1b75;
}
.button1:hover
{
 background:#e570e7;
}
.button2
{
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
display:inline-block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:solid 2px #bc900d;
}
.button2:hover
{
 background:#ffd65e;
}
.button3
{
background: #ff5db1; /* Old browsers */
background: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff5db1 0%,#ef017c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */
display:inline-block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:solid 2px #7a1b75;
}
.button3:hover
{
 background:#ff5db1;
}
.button4
{
background: #49c0f0; /* Old browsers */
background: -moz-linear-gradient(top,  #49c0f0 0%, #2cafe3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#2cafe3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #49c0f0 0%,#2cafe3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #49c0f0 0%,#2cafe3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #49c0f0 0%,#2cafe3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #49c0f0 0%,#2cafe3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
display:inline-block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:solid 2px #10678a;
}
.button4:hover
{
 background:#49c0f0;
}

HTML CODE

Button One
Button Two
Button Three
Button Four

Download File Used in this example View Live Demo

Total Downloads: