Progress Bar
by Hm Ba
HTML
<script src="https://arlina-design.googlecode.com/svn/progressbar.js"></script>
<div class="container">
<h3><a href='http://www.ar1web.com/2015/02/button-css-click-effect.html' target="_blank"> عودة لتدوينة</a></h3>
<div class='clear'/>
<div style="text-align: center;">
<a class="button" href="#">افتراضي</a>
<a class="button button-upload" href="#">تحميل</a>
<a class="button button-view" href="#">معاينة</a>
<a class="button button-error" href="#">خطأ</a>
<a class="button button-warning" href="#">تنبيه</a>
<a class="button button-hm" href="#">رفع الملف</a>
</div>
<div class="clear"></div>
</div>CSS
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #eee url(http://4.bp.blogspot.com/-slIpCw8me28/VFTDpK5VZOI/AAAAAAAAGkg/1zr5U-PKryM/s1600/Fly%2BAr1web.png) 50% 0 no-repeat;
}
h3 {
font-size: 20px;
font-weight: 400;
font-family:ge_ss_threeregular;
text-align: center;
padding: 15px;
position: relative;
margin: 60px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 200px;
box-shadow: 0 0 3px #e5e5e5;
transition: all 0.5s ease-in-out;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
background: #DA4444; transition: all 0.5s ease-in-out; color: #A31D1D;
}
.button{background-color:#bdc3c7;font-size:13px;text-decoration:none;color:#676873;position:relative;margin-left:35px;padding:10px 20px;border-left:solid 1px #d3d8db;
border-radius: 3px;box-shadow: inset 0px 1px 0px #dcdfe1, 0px 5px 0px 0px #7f8c8d;font-family: ge_ss_tvbold;}
.button:hover{top:7px;color:#95a5a6;background-image:linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);box-shadow:inset 0px 1px 0px #ecf0f1, 0px 1px 0px 0px #7f8c8d;text-shadow:0px 1px 1px rgba(255,255,255,0.3);}
.button-upload{color:#fff;background-color:#3498db;border-left:solid 1px #6fbaec;box-shadow:inset 0px 1px 0px #73b0d8, 0px 6px 0px #2980b9;}
.button-upload:hover{color:#2980b9;box-shadow:inset 0px 1px 0px #73b0d8, 0px 1px 0px 0px #2980b9;}
.button-view{color:#fff;background-color:#2ecc71;border-left:solid 1px #78e0a4;box-shadow:inset 0px 1px 0px #6ccc95, 0px 6px 0px #27ae60;}
.button-view:hover{color:#26a95e;box-shadow:inset 0px 1px 0px #6ccc95, 0px 1px 0px 0px #27ae60;}
.button-error{color:#fff;background-color:#e74c3c;border-left:solid 1px #ee897f;box-shadow:inset 0px 1px 0px #e98a80, 0px 5px 0px #c0392b;}
.button-error:hover{color:#cc3e2f;box-shadow:inset 0px 1px 0px #e98a80, 0px 1px 0px 0px...