20 Fresh and colorfull css button for website/Blogs

                                            Here is the result of an experiment with fonts and css3 properties like text-shadow and box-shadow: Click here to download the ZIP file with the two overlay images: CSS3 Buttons ZIP The buttons are defined as link elements and the css looks like this: .button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -moz-border-radius: 10px; ...


Here is the result of an experiment with fonts and css3 properties like text-shadow and box-shadow:

Live Demo

Click here to download the ZIP file with the two overlay images: CSS3 Buttons ZIP

The buttons are defined as link elements and the css looks like this:

.button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-bottom: 1px solid rgba(0,0,0,0.25); font-family: "Lucida Grande",Lucida,Verdana,sans-serif; outline:none; position:relative; font-size: 32px; margin:10px; background:transparent url(buttonover.png) repeat-x top left; white-space:nowrap; } .button:hover{ background-color: #777; } .button:active{ top: 1px; left:1px; }

Now we define the single buttons with their individual style and we will give our a element two classes then:

.shadow{background-color: #a3a3a3;border: 2px solid #777;color: #FFF;font-weight:bold;text-shadow: 0 1px 1px rgba(0,0,0,0.8);}.engraved{background: #666;border: 2px solid #777;color: #000;text-shadow: 0px 1px 1px #fff;font-weight: bold;}.glow{color: #fff;background: #888;border: 2px solid #777;text-shadow: 1px 1px 6px #fff;}.white{color: #fff;background: #fff;text-shadow: 1px 1px 4px #000;border: 2px solid #f0f0f0;font-family: "Arial";font-weight:bold;text-transform:uppercase;letter-spacing:-1px;}.white:hover{background-color:#f1f1f1;}.red{background-color: #B00000;border: 1px solid #7F0000;color: #FFF;text-shadow: 1px 1px 4px #000;font-family: "Palatino Linotype";}.red:hover{background-color:#800000;}
.lightblue{background-color: #7FB0F0;color: #FFF;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);font-weight:100;}.lightblue:hover{background-color:#7FA0C0;}.olive{background-color: #B0E000;border: 1px outset #D0E000;color: #FFF;font-style:italic;text-shadow: 0 2px 1px rgba(0,0,0,0.2);}.olive:hover{background-color: #90A000;}.orange{background-color: #FFCC00;border: 1px outset #F2FF00;color: #FFF;font-family:Helvetica;font-weight:bold;}.orange:hover{background-color: #FF8000;}.pink{background-color: #C0107F;border: 1px outset #70107F;color: #FFF;font-family:"Georgia";font-weight:bold;}.pink:hover{background-color: #F0107F;}.pink:active{border: 1px inset #70107F;}.sea{background-color: #20807F;color: #FFF;}.sea:hover{background-color: #60807F;}.rose{background-color: #F07FD0;color: #FFF;font-family: "Palatino Linotype";font-style: italic;letter-spacing:-1px;text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);}.rose:hover{background-color: #B07FA0;}.black{background-color: #000;background-image:url(buttonover2.png);color: #FFF;letter-spacing:-1px;text-shadow: 0 2px 1px rgba(0,0,0,0.2);}.black:hover{background-color: #777;}
.sand{background-color: #FFF090;background-image:url(buttonover2.png);color: #fff;letter-spacing: 3px;text-shadow: 1px 0px 1px rgba(0,0,0,0.2);}.sand:hover{background-color: #F0C07F;}
.violet{background-color: #9400D3;background-image:url(buttonover2.png);color: #777;font-family:"Arial Black";text-shadow: 0px 1px 1px #fff;}.violet:hover{background-color: #8A2BE2;}
.green{background-color: #32CD32;background-image:url(buttonover2.png);color: #fff;font-family:"Century Gothic";text-transform:uppercase;font-style:italic;text-shadow: 1px 0px 1px rgba(0,0,0,0.2);}.green:hover{background-color: #2F4F4F;}.darkblue{background-color: #00008B;background-image:url(buttonover2.png);color: #fff;font-family:"Impact";text-shadow: 1px 0px 1px rgba(0,0,0,0.2);}.darkblue:hover{background-color: #191970;}.sunset{background-color: #FF6347;background-image:url(buttonover2.png);color: #777;font-family:"Palatino Linotype";text-transform:uppercase;text-shadow: 0px 1px 1px #fff;}.sunset:hover{background-color: #FF7F50;}.choco{background-color: #D2691E;background-image:url(buttonover2.png);color: #fff;font-family:"Gill Sans";text-shadow: 1px 0px 1px rgba(0,0,0,0.2);}.choco:hover{background-color: #D2B48C;}.cadet{background-color: #5F9EA0;background-image:url(buttonover2.png);color: #fff;font-family: "Arial Narrow";text-shadow: 1px 0px 1px rgba(0,0,0,0.2);}.cadet:hover{background-color: #008080;}.aqua{background-color: #00FFFF;background-image:url(buttonover2.png);color: #fff;font-family: "Tahoma";text-shadow: 1px 1px 4px #000;}.aqua:hover{background-color: #00FFCC;}

The html is pretty straightforward:

<body style="background-color:#888;">

<a href="#" class="button shadow">Cool Shadow</a> <a href="#" class="button engraved">Dark Engraved</a> <a href="#" class="button glow">Mystic Glow</a> <a href="#" class="button white">Frozen White</a> <a href="#" class="button red">Sexy Red</a> <a href="#" class="button lightblue">Heavenly Blue</a> <a href="#" class="button olive">Olive Outset</a> <a href="#" class="button orange">Juicy Orange</a> <a href="#" class="button pink">Lovely Pink</a> <a href="#" class="button sea">Deep Sea</a> <a href="#" class="button rose">Rose Vanity</a> <a href="#" class="button black">Buttonize Gray</a> <a href="#" class="button sand">Dreamy Sand</a> <a href="#" class="button violet">Violent Violet</a> <a href="#" class="button green">Grasshopper</a> <a href="#" class="button darkblue">Ocean Blue</a> <a href="#" class="button sunset">Golden Sunset</a> <a href="#" class="button choco">Sweet Chocolate</a> <a href="#" class="button cadet">Cadet Dreams</a> <a href="#" class="button aqua">Aqua Love</a> </body>

Of course, the body should not be the immediate parent of the a but some other div. This was just a quick solution.

Enjoy!

[content source : http://tympanus.net/codrops ]