20 fresh and colorful CSS3 buttons

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:

Click on this image to see a DEMO
Click on this image to see a 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!

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.