Stylish CSS3 Buttons with Icons

Today I am going to share how to create a stylish css3 buttons with alert icons by using simple css code. Please check out my previous post called css3 small , large download buttons without icon – link

Features

1. Information button
2. Success button
3. Warning button
4. Error Button
5. Add new button
6. Download Button
7. Upload button
8. Help Button
9. Delete Button

Css Code

.my-button {

 text-transform:capitalize;

 cursor:pointer;

 padding:7px 15px;

 margin:7px 0 0;

 line-height:25px;

 display:inline-block;

 border:none;

 color:#fff;

 font-weight:bold;

 -webkit-text-shadow:0 -1px 0 rgba(0,0,0,0.2);

 -moz-text-shadow:0 -1px 0 rgba(0,0,0,0.2);

 text-shadow:0 -1px 0 rgba(0,0,0,0.2);

}

.my-button:hover { color:#fff; }

.small,.small:hover {

 line-height:12px;

 font-size:11px;

 -webkit-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 -moz-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;

}

.medium,.medium:hover {

 line-height:18px;

 font-size:13px;

 -webkit-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 -moz-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

}

.large,.large:hover {

 line-height:24px;

 font-size:14px;

 padding:9px 17px;

 -webkit-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 -moz-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

 box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;

}

.blue {

 background-color:#01afe7;

 border:1px solid #009bcd;

}

.blue:hover {

 background-color:#15c6ff;

}

.slate {

 background-color:#838B8E;

 border:1px solid #767c7f;

}

.slate:hover {

 background-color:#939c9f;

}

.pink {

 background-color:#ea3271;

 border:1px solid #d72160;

}

.pink:hover {

 background-color:#FD5D94;

}

.lamb {

 background-color:#e6c470;

 border:1px solid #d5b462;

}

.lamb:hover {

 background-color:#F7D683;

}

.red {

 background-color:#D54336;

 border:1px solid #c5392c;

}

.red:hover {

 background-color:#f4695d;

}

.green {

 background-color:#8EC63F;

 border:1px solid #79ab34;

}

.green:hover {

 background-color:#a5e151;

}

.terra {

 background-color:#ef6658;

 border:1px solid #ec6a5d;

}

.terra:hover {

 background-color:#ff7f72;

}

.grey {

 background-color:#bdbdbd;

 border:1px solid #acacac;

}

.grey:hover {

 background-color:#CFCFCF;

}

.brown {

 background-color:#b0a066;

 border:1px solid #998b57;

}

.brown:hover {

 background-color:#C5B475;

}

.dark {

 background-color:#457D97;

 border:1px solid #35667c;

}

.dark:hover {

 background-color:#5695b3;

}

.white {

 background-color:#dddddd;

 border:1px solid #c7c7c7;

 color:#555;

}

.white:hover {

 background-color:#eee;

}

.black {

 background-color:#555;

 border:1px solid #333;

}

.black:hover {

 background-color:#757575;

}

.purple {

 background-color:#c215d5;

 border:1px solid #790186;

}

.purple:hover {

 background-color:#e034f3;

}

.orange {

 background-color:#FC9B0F;

 border:1px solid #e58700;

}

.orange:hover {

 background-color: #fcc10f;

}

.my-button span {

 float:left;

 display:inline-block;

 margin-top:3px;

 margin-right:5px;

}

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

View Demo Download