Flat UI Download Button

Visit www.blogsmz.com

HTML

<!--بنفسجي -معاينة --> 
<div class="vn-red" style="text-align: center;">
<a href="http://sweup.com/" target='_blank'>تحميل</a>
</div>
<!--اخضر -تحميل -->
<div class="vn-green" style="text-align: center;">
<a href="http://sweup.com/" target='_blank' class="btn-wrap">تحميل</a>
</div>
<!--اخضر-معاينة -->
<div class="vn-teal" style="text-align: center;">
<a href="http://sweup.com/" target='_blank' class="btn-wrap">تحميل</a>
</div>
<!--برتقالي -تحميل  -->
<div class="vn-orange" style="text-align: center;">
<a href="#" class="btn-wrap">تحميل</a>
</div>
<!--ازرق-تحميل -->
<div class="vn-blue" style="text-align: center;">
  <a href="#" class="btn-wrap">تحميل</a>
</div>

CSS

@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

a:link{text-decoration:none;font-family:Oswald;font-size:14px}
.vn-red a{
  background-color:red;
  display:inline-block;
  position:relative;
  margin:30px ;
  padding:20px 20px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-red a:before{
  content:"\f06e";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-red a:hover{
  background:#2c3e50
}

.vn-green a{
background-color:#27ae60;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-green a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-green a:hover{
  background:#2c3e50
}

.vn-teal a{
background-color:#16a085;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-teal a:before{
  content:"\f06e";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
 ...