أزرار التحميل والمعاينة بشكل جديد بتقنية CSS 3

السلام عليكم ورحمة الله تعالى وبركاته 

اليوم بحول الله سوف نقدم لكم زرين للتحميل والمعاينة بشكل جميل جدا وجذاب ، هته الأزرار مهمة جدا لكل مدون حيث تزيد من جمالية مدونته ، فهي  مبرمجة بتقنية CSS 3 خالصة ، بها تأثيرات جميلة ، تابعونا لنكتشف المزيد عن قرب 

لمعاينة الأزرار

معاينة

لتركيب الأزرار 

أولا يجب عليك البحث عن :

]]></b:skin>

ووضع هذه الأكواد فوقه

/* CSS Th Demo/view buttons*/
.custombtn-button2 {margin:20px auto;padding:0;width:auto;text-align:center;}
.custombtn-button {height:40px;display:inline-block;border:1px solid #c0392b;font-family:'Droid Sans', sans-serif;font-size:20px;font-weight:400;text-align:center;text-decoration:none;color:#e74c3c;overflow:hidden;}
a.custombtn-button {padding:0;margin:0;line-height:0;}
.custombtn-button .icon {margin-right:6px;}
.custombtn-button .custombtn-button-depan,.custombtn-button .custombtn-button-belakang {display:block;
padding:0 20px;line-height:40px;transition:margin .4s;}
.custombtn-button .custombtn-button-depan {background-color:#e74c3c;color:#fff;font-family: ge_dinar_tworegular;}
.custombtn-button .custombtn-button-belakang {background-color:#fff;color:#e74c3c;}
.custombtn-button:hover .custombtn-button-depan {margin-top:-40px;}
.custombtn-button3 {margin:20px auto;padding:0;width:auto;text-align:center;}
.custombtn-buttondemo {height:40px;display:inline-block;border:1px solid #5b536b;font-family:'Droid Sans', sans-serif;font-size:20px;font-weight:400;text-align:center;text-decoration:none;color:#6b627e;overflow:hidden;}
a.custombtn-buttondemo {padding:0;margin:0;line-height:0;}
.custombtn-buttondemo .icon {margin-right:6px;}
.custombtn-buttondemo .custombtn-button-depan,.custombtn-buttondemo .custombtn-button-belakang {display:block;padding:0 20px;line-height:40px;transition:margin .4s;}
.custombtn-buttondemo .custombtn-button-depan {background-color:#6b627e;color:#fff;font-family: ge_dinar_tworegular;}
.custombtn-buttondemo .custombtn-button-belakang {background-color:#fff;color:#6b627e;}
.custombtn-buttondemo:hover .custombtn-button-depan {margin-top:-40px;}
a.cstmbtn {color:#444;position:relative;text-decoration:none;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;font-weight:400;overflow:hidden;text-align:left;}
a.cstmbtn span {opacity:1;display:block;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.68,-0.55,0.265,1.55);transition:all 500ms cubic-bezier(0.68,-0.55, 0.265,1.55);}
a.cstmbtn:after {opacity:0;content: attr(data-link-alt);display:inline;position:absolute;-webkit-transition: top 500ms cubic-bezier(0.68,-0.55,0.265,1.55);transition: top 500ms cubic-bezier(0.68,-0.55,0.265,1.55);top:100%;left:0;right:0;text-align:left;}
a.cstmbtn:hover span {opacity:0;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);}
a.cstmbtn:hover:after {top:0;opacity:1;}

وعند كتابتك للتدوينة كل ما عليك هو الذهاب الى تحرير HTML  داخل التدوينة ، ومن ثم وضع هذه الأكواد 

<!-- Download button -->
<div class="custombtn-button2"><a class="custombtn-button" href="http://www.datafilehost.com/d/22d1df21" target="_blank"><br>
<div class="custombtn-button-depan"><span class="icon fa fa-cloud-download"></span> تحميل<br>
</div><div class="custombtn-button-belakang"><span class="icon fa fa-hdd-o"></span> Size : 2 MB<br>
</div></a><br>
</div>
    
<!-- Demo Button -->
    <div class="custombtn-button3"><a class="custombtn-buttondemo" href="http://afusions.blogspot.com" target="_blank"><br>
<div class="custombtn-button-depan"><span class="icon fa fa-rocket"></span>معاينة<br>
</div><div class="custombtn-button-belakang"><span class="icon fa fa-arrow-circle-right"></span> View me<br>
</div></a><br>
</div>fu

بعد ذلك يجب عليك البحث عن : 

</head>

وجلب الخطوط المستعملة 

    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
    <link href='https://tahadouhi.googlecode.com/svn/taha/font-ge_dinar.css' rel='stylesheet'/>

إلى هنا يكون شرحنا قد انتهى نرجوا ان تكونوا قد استفدتم ، نرجوا منكم ترك تعليق ولايك وشكرا