أرار المعاينة والتحميل 1

by homeblogger7

HTML

<a class="demobutton button" href="ضع هنا رابط التوجيه" rel="nofollow" style="float: center;" target="_blank">
  <span style="display: inline-block;">
    المعاينة المباشرة
  </span>
</a>



<a class="button downloadbutton" href="ضع هنا رابط التحميل" rel="nofollow" style="float: center;" target="_blank">
  <span style="display: inline-block;">
    التحميل
  </span>
</a>

CSS

.button {
 -moz-border-radius:5px 5px 5px 5px;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px 5px 5px 5px;
 -moz-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 -webkit-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 background:urlundefined"http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
 border-bottom:1px solid rgbaundefined0, 0, 0, 0.25);
 color:#FFFFFF !important;
 cursor:pointer;
 font-weight:bold;
 line-height:1;
 overflow:visible;
 font-size:17px;
 padding:8px 19px 9px;
 position:relative;
 text-decoration:none;
 text-shadow:0 -1px 1px rgbaundefined0, 0, 0, 0.25);
 width:auto;
}
.demobutton {
 background-color:#999999;
 text-align:center;
 width:150px;
}
 .demobutton:hover {
  background-color:#00A0EE;
 }
.downloadbutton {
 background-color:#91BD09;
 text-align:center;
 width:150px;
}
 .downloadbutton:hover {
  background-color:#00AC00;
 }
.button:hover {
 -moz-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 -webkit-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
}