Categories
Uncategorized

Top 5 CSS Button Styling Tutorials and Techniques

One of my designer friend, recently shared with me his small experiment on buttons using CSS. Here is a direct link to the fiddle he shared. I hope someone finds this useful.

Please feel free to modify this fiddle and share your output with me, using the comment box. Cheers !

https://jsfiddle.net/WMTE2/embedded/result,html,css

Html Code :
[sourcecode language=”html”]
<p>
 <div class=”google”>Google Red</div>
</p>

<p>
 <div class=”facebook”>Facebook Blue</div>
</p>

<p>
 <div class=”amazon”>Amazon Yellow</div>
</p>

<p>
 <div class=”windows”>Windows Phone Red</div>
</p>

<p>
 <div class=”nexus”>Google Nexus</div>
</p>
[/sourcecode]

CSS Code :
[sourcecode language=”css”]
.google {
 width: 200px;
 background-color: #D14836;
 border: 1px solid #999;
 border-radius: 4px;
 padding: 10px;
 margin: 10px 5px;
 font-size: 12px;
 font-family: Arial;
 font-weight: bold;
 color: #fff;
 white-space: nowrap;
 display: block;
 text-align: center;
 cursor: pointer;
}
.facebook {
 width: 200px;
 background-color: #5B74A8;
 border: 1px solid #29447E;
 border-radius: 4px;
 padding: 10px;
 margin: 10px 5px;
 font-size: 12px;
 font-family: Arial;
 font-weight: bold;
 color: #fff;
 white-space: nowrap;
 display: block;
 text-align: center;
 cursor: pointer;
}
.amazon {
 width: 200px;
 background-color: #FECD57;
 border: 1px solid #FBC43C;
 border-radius: 4px;
 padding: 10px;
 margin: 10px 5px;
 font-size: 12px;
 font-family: Arial;
 font-weight: bold;
 color: #333;
 white-space: nowrap;
 display: block;
 text-align: center;
 cursor: pointer;
}
.windows {
 width: 200px;
 background-color: #E51400;
 border: 1px solid #E51400;
 border-radius: 4px;
 padding: 10px;
 margin: 10px 5px;
 font-size: 12px;
 font-family: Arial;
 font-weight: bold;
 color: #fff;
 white-space: nowrap;
 display: block;
 text-align: center;
 cursor: pointer;
}
.nexus {
 width: 200px;
 background-color: #4CADCB;
 border: 1px solid #02A9D6;
 border-radius: 4px;
 padding: 10px;
 margin: 10px 5px;
 font-size: 12px;
 font-family: Arial;
 font-weight: bold;
 color: #fff;
 white-space: nowrap;
 display: block;
 text-align: center;
 cursor: pointer;
}
[/sourcecode]

Further Reading :
CSS Button Styling Tutorials and Techniques