صنع ازرار للتحميل والمعاينة باستخدام الCSS لمدونات بلوجر

عدد مشاهدات الموضوع:

أهلا وسهلا زوار مدونة ابواياد, اليوم رح نطرح موضوع بسيط بتقنية الcss وهو كيفية اضافة ازرار التحميل والمعاينة مرفقا بايقونة تدل على التحميل او المعاينة او غيرها من الايقونات يمكنك المعاينة من هنا 

 لاضافة ازرار التحميل نذهب الى القالب >>تحرير HTML

نبحث عن الوسم التالي ]]></b:skin> ونلصق الكود التالي فوقه بماشرة  اذا لم تعرف كيفية البحث عن الكود أو الوسم السابق قم بمشاهدة هذا الفيديو

@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:24px}

<!--أحمر -للمعاينة --> 

.vn-red a{

  background-color:red;

  display:inline-block;

  position:relative;

  margin:30px 5px;

  padding:20px 20px 20px 80px;

  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;

  border-radius:0 20px 0 0;

  color:#000;

  background-color:#fff;

  opacity:0.3;

  padding:20px;

  top:0;

  left:0

}

.vn-teal a:hover{

  background:#2c3e50

}

<!--برتقالي -تحميل  -->

.vn-orange a{

background-color:#f39c12;

  display:inline-block;

  position:relative;

  margin:30px 5px;

  padding:20px 20px 20px 80px;

  color:#fff;

  transition:all 0.4s ease

}

.vn-orange 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-orange a:hover{

  background:#2c3e50

}

<!--ازرق-تحميل -->

.vn-blue a{

background-color:#2980b9;

  display:inline-block;

  position:relative;

  margin:30px 5px;

  padding:20px 20px 20px 80px;

  color:#fff;

  transition:all 0.4s ease

}

.vn-blue 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-blue a:hover{

  background:#2c3e50

}

الان قمنا باضافة خمس ازرار بالوان مختلفة ولتغيير على خصائص هاي الازرار يمكنك التغير على كل من التالي
background-color لون خلفية الزر
 color لون الكتابة داخل الزر 
content: الايقونة التي تظهر على جانب الزر يمكنك الحصول على كافة الازرار من هنا
a:before الخصائص التي تكون في هذا البلوك تكون قبل الظغط على الزر 
a:hover الخصائص التي تكون في هذا البلوك تكون اثناء مرور مؤشر الماوس على الزر 
يمكنك تغيير اللاوان بالاستعانة بمولد الالوان لمدونة ابواياد
بعد تغير كل شي تريده احفظ القالب واذهب لانشاء مشاركة جديدة لتجربة الازرار
الان لاستخدام احد الازرار يمكنك نسخ احد الاكواد التالية حسب لون الزر الذي تريده ونسخه في محرر HTML

<!--أحمر -للمعاينة --> 

<div class="vn-red" style="text-align: center;">

<a href="#">تحميل</a>

</div>

<!--اخضر -تحميل -->

<div class="vn-green" style="text-align: center;">

<a href="#" class="btn-wrap">تحميل</a>

</div>

<!--اخضر-معاينة -->

<div class="vn-teal" style="text-align: center;">

<a href="#" 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>

كما يمكنك تغير كلمة تحميل باي كلمة اخرى ووضع رابط التحميل او المعاينة بدل من ال#
لا تنسى مشاركة الموضوع بين اصدقائك