السلام عليكم ورحمة الله تعالى وبركاته
اليوم بحول الله سوف نقدم لكم زرين للتحميل والمعاينة بشكل جميل جدا وجذاب ، هته الأزرار مهمة جدا لكل مدون حيث تزيد من جمالية مدونته ، فهي مبرمجة بتقنية 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 داخل التدوينة ، ومن ثم وضع هذه الأكواد
