4 أشكال مختلفة من الأزرار و كل شكل يحتوي على 6 ألوان مختلفة إختر منها ما شئت أو يمكنك أن تستعملها جميعا على حسب نوع المحتوى الذي تتميز به مدونتك , مثلا إن كانت مدونتك تستعرض قةالب بلوجر أو إضافات بلوجر فستحتاج للونين الأول للتحمبل و الثاني للمعاينة . مثلا .
إذا بدون إطالة نستهل الشرح .
. الخطوة الأولى إختر النوع الذي تريد من الأشكال التي سأقدم لك ثم
إذهب إلى بلوجر- قالب - تحرير HTML و إلصق كود css للأزرار ضمن أكواد css الخاصة بمدونتك
إبحث عن هذا الكود ]]></b:skin> بالضغط على CTRL+f في صندوق الأكواد و قم بلصق كود css فوقه
. الخطوة الثانية أما أكواد HTML للأزرار فإستعملها عند كتابتك لتدوينة إنسخ الكود و ألصقه ضمن أكواد HTML للتدوينة
ثم إستبدل الكلمة الموجودة على الزر بأي كلمة تريد
الشكل الأول Standard Buttons
Red Button Orange Button Green Button
Blue Button Gray Button Dark Button
أكواد css
Blue Button Gray Button Dark Button
أكواد css
/* Standard Buttons */أكواد HTML
a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
a.standard:hover { color: #fff; opacity: .5 }
<a href="http://www.YOUR-LINK-HERE.com/" class="standard red">Red Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard orange">Orange Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard green">Green Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard blue">Blue Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard gray">Gray Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard dark">Dark Button</a>
الشكل الثاني Arrow Buttons
أكود CSS
/* Arrow Buttons */
a.arrow { background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top; border: 4px solid rgba(0, 0, 0, .1); color: #fff; display: inline-block; font-size: 1.1em; font-weight: bold; padding: .6em 1.2em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
a.arrow.red { background-color: #b20000 }
a.arrow.orange { background-color: #f76c0f }
a.arrow.green { background-color: #248334 }
a.arrow.blue { background-color: #1086b6 }
a.arrow.gray { background-color: #aeaeae }
a.arrow.dark { background-color: #343434 }
a.arrow:hover { color: #fff; opacity: .5 }
أكواد HTML
<a class="arrow red" href="http://www.YOUR-LINK-HERE.com/">Red Arrow Button</a>
<a class="arrow orange" href="http://www.YOUR-LINK-HERE.com/">Orange Arrow Button</a>
<a class="arrow green" href="http://www.YOUR-LINK-HERE.com/">Green Arrow Button</a>
<a class="arrow blue" href="http://www.YOUR-LINK-HERE.com/">Blue Arrow Button</a>
<a class="arrow gray" href="http://www.YOUR-LINK-HERE.com/">Gray Arrow Button</a>
<a class="arrow dark" href="http://www.YOUR-LINK-HERE.com/">Dark Arrow Button</a>
الشكل الثالث Bevel Buttons
Red Bevel Button Orange Bevel Button Green Bevel Button
Blue Bevel Button Gray Bevel Button Dark Bevel Button
Red Bevel Button Orange Bevel Button Green Bevel Button
Blue Bevel Button Gray Bevel Button Dark Bevel Button
أكواد CSS
/* Bevel Buttons */
a.bevel { border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2); border-style: solid; border-width: 3px; color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
a.bevel.red { background: #b20000 }
a.bevel { background: #f76c0f }
a.bevel.green { background: #248334 }
a.bevel.blue { background: #1086b6 }
a.bevel.gray { background: #aeaeae }
a.bevel.dark { background: #343434 }
.bevel:hover { color: #fff; opacity: .5 }
أكواد HTML
<a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>
<a class="bevel orange" href="http://www.YOUR-LINK-HERE.com/">Orange Bevel Button</a>
<a class="bevel green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a>
<a class="bevel blue" href="http://www.YOUR-LINK-HERE.com/">Blue Bevel Button</a>
<a class="bevel gray" href="http://www.YOUR-LINK-HERE.com/">Gray Bevel Button</a>
<a class="bevel dark" href="http://www.YOUR-LINK-HERE.com/">Dark Bevel Button</a>
الشكل الرابع Engraved Buttons
Red Engraved Button Orange Engraved Button Green Bevel Button
Blue Engraved Button Gray Engraved Button Dark Engraved Button
Blue Engraved Button Gray Engraved Button Dark Engraved Button
أكواد CSS
/* Engraved Buttons */
.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }
أكواد HTML
<span class="engraved"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Red Engraved Button</a></span>
<span class="engraved"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Orange Engraved Button</a></span>
<span class="engraved"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a></span>
<span class="engraved"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Blue Engraved Button</a></span>
<span class="engraved"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Gray Engraved Button</a></span>
<span class="engraved"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Dark Engraved Button</a></span>
إرسال تعليق