كل من لديه مدونة ومهتم بالتدوين وبموقعه من ناحية الشكل ككل يريد يوميا أن يجدد شيئ حتى ولو كان بسيط وإضافتنا لليوم عبارة عن أزرار مثل المستعملة في المدونة سبق وقدمت أزرار الجزء الأول والثاني هذه المرة ستكون مكتبة متجددة شهريا لأزرار مختلفة بتصميم Css بسيطة وإحترافية في نفس الوقت، لنعاين أولا الأشكال والتأثيرات الخاصة بالأزرار
قبل كل شيئ أضف الكوديين التاليين خاصيين بالأيقونات فوق </head> إذا كنت تتوفر عليهما فلا داعي لإضافتهما
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
لتغيير الأيقونات تابع التدوينة التالية هنا
/* CSS Button Style Simple*/
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {opacity:1;padding:7px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:hover,.demo2:hover,.demo1:hover,.demo:hover,.download1:hover,.download:hover {opacity:0.9;transition:opacity .4s ease-in-out;}
.demo:before {content:'\f06e';display:inline-block;;margin-left:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out; }
.download:before {content:'\f019';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download1 {opacity:1;padding:7px 14px!important;background:#FEC93F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download1:before {content:'\f07b';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo1 {opacity:1;padding:7px 14px!important;background:#FE843F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo1:before {content:'\f013';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo2 {opacity:1;padding:7px 14px!important;background:#FE3F9B;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo2:before {content:'\f0ee';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download2 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:before {content:'\f0c1';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
كود الأزرار الثانية
/* CSS Button Style Flat */
.buttonhm{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm li{display:inline;margin:0;padding:0;}
.buttonhm li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.buttonhm li a:hover{background:#2980b9;}
.buttonhm1 li a:hover{background:#C22D2D;}
.buttonhm1{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm1 li{display:inline;margin:0;padding:0;}
.buttonhm1 li a{background:#DB3434;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
كود الأزرار الثالثة
/* CSS Button Style Ar1web */
.buttonar1web{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonar1web li{display:inline;margin:0;padding:0;}
.buttonar1web li a{padding:7px 20px;margin:auto 5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 !important;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, #f2f2f2);background:-moz-linear-gradient(top, #fff, #f2f2f2);background:-ms-linear-gradient(top, #fff, #f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 1px 2px #ddd;font-family: electrolize;}
.buttonar1web li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);color:#111 !important;}طريقة التركيب Html
1. إذا اردت إستخدام زر واحد إختر الكود من <a إلى <a/
2. احذف الزر الذي لا تريده من <li> إلى </li>
3. ضع بدل # الرابط
4. المحدد باللون الأصفر هو كود لبداية كل زر ونهايته </ul>
كود الأزرار الأولى
<div style='text-align: center;'>
<ul class='button'>
<li><a class='demo' href='#'>معاينة</a></li>
<li><a class='demo1' href='#'>تخصيص</a></li>
<li><a class='demo2' href='#'>رفع مباشر</a></li>
<li><a class='download' href='#'>تحميل مباشر</a></li>
<li><a class='download1' href='#'>تحميل الملف</a></li>
<li><a class='download2' href='#'>الرابط مرفق</a></li>
</ul>
<div class='clear'/>
كود الأزرار الثانية
<div style='text-align: center'>
<ul class='buttonhm'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
<ul class='buttonhm1'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
</div>
<div class='clear'/>
كود الأزرار الثالثة
<div style='text-align: center'>
<ul class='buttonar1web'>
<li><a href='#' target='_blank'><i class='icon-eye-open'/> Live Demo</a></li>
<li><a href='#' target='_blank'><i class='icon-link'/> Download</a></li>
</ul>
</div>
<div class='clear'/>
ليست هناك تعليقات:
إرسال تعليق