Now
a day’s lots of changes in Web Designing, so every Web Designer try to create Good
Interface. So I have made a Good looking buttons, this stuff for Web Designers.
So
let’s enjoy copy and paste into your UI part.
Here are the some Cool Ready Made CSS3 buttons:
Sample Button1:
.Button-e {
background: linear-gradient(to bottom, #c123de 5%, #a20dbd 100%) repeat scroll 0 0 #c123de;
border: 1px solid #a511c0;
border-radius: 6px;
box-shadow: 0 1px 0 0 #e184f3 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #9b14b3;
}
.Button-e:hover {
background: linear-gradient(to bottom, #a20dbd 5%, #c123de 100%) repeat scroll 0 0 #a20dbd;
}
.Button-e:active {
position: relative;
top: 1px;
}
Demo:
Sample Button2:
.Button-f {
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) repeat scroll 0 0 #f9f9f9;
border: 1px solid #dcdcdc;
border-radius: 6px;
box-shadow: 0 1px 0 0 #ffffff inset;
color: #666666;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.Button-f:hover {
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%) repeat scroll 0 0 #e9e9e9;
}
.Button-f:active {
position: relative;
top: 1px;
}
Demo:
Sample Button3:
.Button-g {
background: linear-gradient(to bottom, #89c403 5%, #77a809 100%) repeat scroll 0 0 #89c403;
border: 1px solid #74b807;
border-radius: 6px;
box-shadow: 0 1px 0 0 #a4e271 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #528009;
}
.Button-g:hover {
background: linear-gradient(to bottom, #77a809 5%, #89c403 100%) repeat scroll 0 0 #77a809;
}
.Button-g:active {
position: relative;
top: 1px;
}
Demo:
Sample Button4:
.Button18 {
background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%) repeat scroll 0 0 #2dabf9;
border: 1px solid #0b0e07;
border-radius: 3px;
box-shadow: 0 -3px 7px 0 #29bbff inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
padding: 9px 23px;
text-decoration: none;
text-shadow: 0 1px 0 #263666;
}
.Button18:hover {
background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%) repeat scroll 0 0 #0688fa;
}
.Button18:active {
position: relative;
top: 1px;
}
Demo:
Sample Button5:
.Button-h {
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%) repeat scroll 0 0 #ffec64;
border: 1px solid #ffaa22;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fff6af inset;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffee66;
}
.Button-h:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%) repeat scroll 0 0 #ffab23;
}
.Button-h:active {
position: relative;
top: 1px;
}
Demo:
Sample Button6:
.Button-i {
background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%) repeat scroll 0 0 #63b8ee;
border: 1px solid #3866a3;
border-radius: 6px;
box-shadow: 0 1px 0 0 #bee2f9 inset;
color: #14396a;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #7cacde;
}
.Button-i:hover {
background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%) repeat scroll 0 0 #468ccf;
}
.Button-i:active {
position: relative;
top: 1px;
}
Demo:
Sample Button7:
.Button-c {
background: linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%) repeat scroll 0 0 #ff5bb0;
border: 1px solid #ee1eb5;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fbafe3 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #c70067;
}
.Button-c:hover {
background: linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%) repeat scroll 0 0 #ef027d;
}
.Button-c:active {
position: relative;
top: 1px;
}
Demo:
Sample Button8:
.Button-b {
background: linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%) repeat scroll 0 0 #f0c911;
border: 1px solid #e65f44;
border-radius: 6px;
box-shadow: 0 1px 0 0 #f9eca0 inset;
color: #c92200;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ded17c;
}
.Button-b:hover {
background: linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%) repeat scroll 0 0 #f2ab1e;
}
.Button-b:active {
position: relative;
top: 1px;
}
Demo:
Sample Button9:
.Button-a {
background: linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%) repeat scroll 0 0 #b8e356;
border: 1px solid #83c41a;
border-radius: 6px;
box-shadow: 0 1px 0 0 #d9fbbe inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #86ae47;
}
.Button-a:hover {
background: linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%) repeat scroll 0 0 #a5cc52;
}
.Button-a:active {
position: relative;
top: 1px;
}
Demo:
Sample Button10:
.lightoButton {
background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%) repeat scroll 0 0 #ffc477;
border: 1px solid #eeb44f;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fce2c1 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #cc9f52;
}
.lightoButton:hover {
background: linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%) repeat scroll 0 0 #fb9e25;
}
.lightoButton:active {
position: relative;
top: 1px;
}
Demo:
Sample Button11:
.whiteButton {
background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%) repeat scroll 0 0 #ededed;
border: 1px solid #dcdcdc;
border-radius: 6px;
box-shadow: 0 1px 0 0 #ffffff inset;
color: #777777;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.whiteButton:hover {
background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%) repeat scroll 0 0 #dfdfdf;
}
.whiteButton:active {
position: relative;
top: 1px;
}
Demo:
Sample Button12:
.cssblue {
background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%) repeat scroll 0 0 #79bbff;
border: 1px solid #84bbf3;
border-radius: 6px;
box-shadow: 0 1px 0 0 #bbdaf7 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #528ecc;
}
.cssblue:hover {
background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%) repeat scroll 0 0 #378de5;
}
.cssblue:active {
position: relative;
top: 1px;
}
Demo:
Sample Button13:
.CSSButtong {
background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%) repeat scroll 0 0 #77d42a;
border: 1px solid #268a16;
border-radius: 6px;
box-shadow: 0 1px 0 0 #caefab inset;
color: #306108;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #aade7c;
}
.CSSButtong:hover {
background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%) repeat scroll 0 0 #5cb811;
}
.CSSButtong:active {
position: relative;
top: 1px;
}
Demo:
Sample Button14:
.Button6 {
background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%) repeat scroll 0 0 #79bbff;
border: 1px solid #337bc4;
border-radius: 5px;
box-shadow: 3px 4px 0 0 #1564ad;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 17px;
font-weight: bold;
padding: 12px 44px;
text-decoration: none;
text-shadow: 0 1px 0 #528ecc;
}
.Button6:hover {
background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%) repeat scroll 0 0 #378de5;
}
.Button6:active {
position: relative;
top: 1px;
}
Demo:
Sample Button15:
.Button5 {
background: linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%) repeat scroll 0 0 #dbe6c4;
border: 1px solid #b2b8ad;
border-radius: 6px;
box-shadow: 0 0 14px -3px #f2fadc inset;
color: #757d6f;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ced9bf;
}
.Button5:hover {
background: linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%) repeat scroll 0 0 #9ba892;
}
.Button5:active {
position: relative;
top: 1px;
}
Demo:
Sample Button16:
.Button4 {
background: linear-gradient(to bottom, #dfbdfa 5%, #bc80ea 100%) repeat scroll 0 0 #dfbdfa;
border: 1px solid #c584f3;
border-radius: 6px;
box-shadow: 0 1px 0 0 #efdcfb inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #9752cc;
}
.Button4:hover {
background: linear-gradient(to bottom, #bc80ea 5%, #dfbdfa 100%) repeat scroll 0 0 #bc80ea;
}
.Button4:active {
position: relative;
top: 1px;
}
Demo:
Sample Button17:
.Button-f {
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) repeat scroll 0 0 #f9f9f9;
border: 1px solid #dcdcdc;
border-radius: 6px;
box-shadow: 0 1px 0 0 #ffffff inset;
color: #666666;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.Button-f:hover {
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%) repeat scroll 0 0 #e9e9e9;
}
.Button-f:active {
position: relative;
top: 1px;
}
Demo:
Sample Button18:
.csslred {
background-color: #e4685d;
border: 1px solid #ffffff;
border-radius: 4px;
box-shadow: 0 39px 0 -24px #e67a73 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 0 1px 0 #b23e35;
}
.csslred:hover {
background-color: #eb675e;
}
.csslred:active {
position: relative;
top: 1px;
}
Demo:
Sample Button19:
.CSSButton {
background: linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%) repeat scroll 0 0 #fe1a00;
border: 1px solid #d83526;
border-radius: 6px;
box-shadow: 0 1px 0 0 #f29c93 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #b23e35;
}
.CSSButton:hover {
background: linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%) repeat scroll 0 0 #ce0100;
}
.CSSButton:active {
position: relative;
top: 1px;
}
Demo:
Sample Button20:
.Button7 {
background: linear-gradient(to bottom, #c62d1f 5%, #f24437 100%) repeat scroll 0 0 #c62d1f;
border: 1px solid #d02718;
border-radius: 18px;
box-shadow: 3px 4px 0 0 #8a2a21;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 17px;
padding: 7px 25px;
text-decoration: none;
text-shadow: 0 1px 0 #810e05;
}
.Button7:hover {
background: linear-gradient(to bottom, #f24437 5%, #c62d1f 100%) repeat scroll 0 0 #f24437;
}
.Button7:active {
position: relative;
top: 1px;
}
Demo:
Sample Button21:
.Button8 {
background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%) repeat scroll 0 0 #ededed;
border: 1px solid #d6bcd6;
border-radius: 15px;
box-shadow: 3px 4px 0 0 #899599;
color: #3a8a9e;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 17px;
padding: 7px 25px;
text-decoration: none;
text-shadow: 0 1px 0 #e1e2ed;
}
.Button8:hover {
background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%) repeat scroll 0 0 #bab1ba;
}
.Button8:active {
position: relative;
top: 1px;
}
Demo:
Sample Button22:
.Button9 {
background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%) repeat scroll 0 0 #637aad;
border: 1px solid #314179;
box-shadow: 0 1px 0 0 #7a8eb9 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
padding: 6px 12px;
text-decoration: none;
}
.Button9:hover {
background: linear-gradient(to bottom, #5972a7 5%, #637aad 100%) repeat scroll 0 0 #5972a7;
}
.Button9:active {
position: relative;
top: 1px;
}
Demo:
Sample Button23:
.Button10 {
background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%) repeat scroll 0 0 #74ad5a;
border: 1px solid #3b6e22;
box-shadow: 0 1px 0 0 #9acc85 inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
padding: 6px 12px;
text-decoration: none;
}
.Button10:hover {
background: linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%) repeat scroll 0 0 #68a54b;
}
.Button10:active {
position: relative;
top: 1px;
}
Demo:
Sample Button24:
.Button11 {
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%) repeat scroll 0 0 #ffec64;
border: 1px solid #ffaa22;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fff6af;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffee66;
}
.Button11:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%) repeat scroll 0 0 #ffab23;
}
.Button11:active {
position: relative;
top: 1px;
}
Demo:
Sample Button25:
gggg
Demo:
Sample Button26:
gggg
Demo:
Sample Button27:
gggg
Demo:
Sample Button28:
gggg
Demo:
Sample Button29:
gggg
Demo:
Sample Button30:
gggg
Demo:
Sample Button31:
gggg
Demo:
Sample Button32:
gggg
Demo:
Sample Button33:
gggg
Demo:
Sample Button34:
gggg
Demo:
Sample Button35:
gggg
Demo:
No comments :
Post a Comment