بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عندي لكم ازرار بشكل جداب وجميل جدا يمكنكم معاينته من هنا
نبدا في الشرح
نتوجه الى القالب ونبحث عن الكود التالي
]]></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>
الى هنا ينتهي الدرس بالتوفيق
.يسمح بالنسخ فقط عند ذكرك للمصدر مع رابطة وان لم تفعل تسمى سرقة وستتم متابعتك قانونيا بالتوفيقا.
تعليقات: (0) (يمكنك التعليق برابط صورة او فيديو) إضافة تعليق