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 […]

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.