اكتب ما تود البحت عنه و اضغط Enter
معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة.

1‏/6‏/2016

حصريا اضافة ازرار المعاينة والتحميل بشكل احترافي



بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عندي لكم ازرار بشكل جداب وجميل جدا يمكنكم معاينته من هنا

نبدا في الشرح

نتوجه الى القالب ونبحث عن الكود التالي

 ]]></b:skin>
وبعدها اضف الكود التالي فوقه
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.boxy {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.6em 1.6em;
  margin: 0.6em;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease;
  border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round;
  background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4);
}
.boxy:hover {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}
.boxy.red {
  border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round;
  background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.red:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4);
}
.boxy.green {
  border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round;
  background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.green:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4);
}
.boxy.la {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 3em;
  padding: 0.3em;
  border-width: 2px;
  display: block;
  width: 70%;
  margin: 0.6em auto;
  border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round;
  background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.la:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4);
}
p {
  color: rgba(255, 255, 255, 0.7);
  margin: 30px;
}
قم بحفظ القالب
وهذا هو كود html اضفه بداخل المشاركة في تبويب html

<a class="boxy" href="#">
  للتحميل
</a>
<a class="boxy red" href="#">
  للمعاينة
</a>
<a class="boxy green" href="#">
  للتحميل
</a>
الى هنا ينتهي الدرس بالتوفيق
.يسمح بالنسخ فقط عند ذكرك للمصدر مع رابطة وان لم تفعل تسمى سرقة وستتم متابعتك قانونيا بالتوفيقا.

شارك الموضوع عبر :

كاتب الموضوع :

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة ل ويب تيك
صمم وكود بكل من طرف