اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

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

يمكنك معاينة شكل الازرار من هنا

الان نبدا بشرح التركيب

1. ابحث في القالب على </head> وضع هذا الكود فوقه مباشرة

<style type='text/css'>/*<![CDATA[*/ .btnabdoutech23{display:inline-block;font-size:12px;padding:1.2em calc(50px + 1.2em) 1.2em 1.2em;border-radius:4px;position:relative;background-color:#263238;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px 0 rgba(0,0,0,.5);margin:5px;overflow:hidden}@media (min-width:560px){.btnabdoutech23{font-size:14px}}@media (min-width:768px){.btnabdoutech23{font-size:16px}}@font-face{font-family:animated-buttons;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}.btnabdoutech23[class*=" icon-"]:before,.btnabdoutech23[class^=icon-]:before,.btnabdoutech23[data-icon]:before{font-family:animated-buttons!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btnabdoutech23.icon-clip:before{content:"\62"}.btnabdoutech23.icon-cloud:before{content:"\63"}.btnabdoutech23.icon-open:before{content:"\65"}.btnabdoutech23.icon-link:before{content:"\66"}.btnabdoutech23.icon-zip:before{content:"\67"}.btnabdoutech23.icon-download:before{content:"\61"}.btnabdoutech23::after,.btnabdoutech23::before{position:absolute;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btnabdoutech23::before{font-size:18px;z-index:5}@media (min-width:560px){.btnabdoutech23::before{font-size:20px}}@media (min-width:768px){.btnabdoutech23::before{font-size:22px}}.btnabdoutech23::after{background-color:#00BCD4;content:""}.btnabdoutech23:active,.btnabdoutech23:focus,.btnabdoutech23:hover{text-decoration:none!important;color:#fff!important}.btnabdoutech23--amber,.btnabdoutech23--cyan,.btnabdoutech23--green,.btnabdoutech23--indigo,.btnabdoutech23--purple,.btnabdoutech23--red,.btnabdoutech23--teal{border-width:2px;border-style:solid}.btnabdoutech23--cyan{background-color:#224851;border-color:#00BCD4}.btnabdoutech23--red{background-color:#532f30;border-color:#f44336}.btnabdoutech23--red::after{background-color:#F44336}.btnabdoutech23--green{background-color:#3e4935;border-color:#8bc34a}.btnabdoutech23--green::after{background-color:#8BC34A}.btnabdoutech23--amber{background-color:#554927;border-color:#ffc107}.btnabdoutech23--amber::after{background-color:#FFC107}.btnabdoutech23--purple{background-color:#362d4b;border-color:#673AB7}.btnabdoutech23--purple::after{background-color:#673AB7}.btnabdoutech23--indigo{border-color:#3f51b5;background-color:#2e324a}.btnabdoutech23--indigo::after{background-color:#3f51b5}.btnabdoutech23--teal{border-color:#009688;background-color:#224041}.btnabdoutech23--teal::after{background-color:#009688}[class*=btnabdoutech23--cover]{background-size:cover;background-repeat:no-repeat;background-position:center;box-shadow:0 -100px 100px -80px rgba(0,0,0,.3) inset,0 1px 2px 0 rgba(0,0,0,.5);font-weight:700}[class*=btnabdoutech23--cover].btnabdoutech23--cyan{box-shadow:0 -100px 100px -80px #00BCD4 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--red{box-shadow:0 -100px 100px -80px #f44336 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--green{box-shadow:0 -100px 100px -80px #8bc34a inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--amber{box-shadow:0 -100px 100px -80px #ffc107 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--purple{box-shadow:0 -100px 100px -80px #673AB7 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--indigo{box-shadow:0 -100px 100px -80px #3f51b5 inset,0 1px 2px 0 rgba(0,0,0,.5)}[class*=btnabdoutech23--cover].btnabdoutech23--teal{box-shadow:0 -100px 100px -80px #009688 inset,0 1px 2px 0 rgba(0,0,0,.5)}@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,70%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}40%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}}.btnabdoutech23--shake:hover::before{-webkit-animation:shake 1s;animation:shake 1s}@-webkit-keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubber{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.5,1.25,1);transform:scale3d(.5,1.25,1)}50%{-webkit-transform:scale3d(1.2,.85,1);transform:scale3d(1.2,.85,1)}65%{-webkit-transform:scale3d(.9,1.05,1);transform:scale3d(.9,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.btnabdoutech23--rubber:hover::before{-webkit-animation:rubber 1s;animation:rubber 1s}@-webkit-keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}@keyframes rotate{from{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}}.btnabdoutech23--rotate:hover::before{-webkit-animation:rotate 1s;animation:rotate 1s}@-webkit-keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}@keyframes flip{from{-webkit-transform:rotate3d(0,1,0,-360deg);transform:rotate3d(0,1,0,-360deg)}40%{-webkit-transform:rotate3d(0,1,0,-190deg);transform:rotate3d(0,1,0,-190deg)}50%{-webkit-transform:rotate3d(0,1,0,-170deg);transform:rotate3d(0,1,0,-170deg)}to{-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg)}}.btnabdoutech23--flip:hover::before{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation:flip 1s;animation:flip 1s} .btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)} .btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)} .btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)} .btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)} .btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)} /*]]>*/</style>

• يمكنك تغيير خلفيات الازرار بوضع الرابط في مكان الاتي

1. .btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)}
2. .btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)}
3. .btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)}
4. .btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)}
5. .btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)}

الان احفظ القالب 

• و الان في كل موضوع اردت فيه ضهور زر تضيف هذا الكود

<a class="btnabdoutech23 icon-download" href="#url">هنا اسم الملف او الرابط</a>

• الان نشرح كيفية التحكم بشكل الازرار

1- الان لتحكم ب الايقونة

في الايقونات توجد 4 ايقونات في المثال توجد ايقونة الداون لود

<a class="btnabdoutech23 icon-download" href="http://www.abdoutech.com">هنا اسم الملف او الرابط</a>

• انتا غير icon-download الجزء الذي ب الاحمر 
• icon-{nameIcon}
• اسماء الاشكال  cloud, open, clip, link , zip

2- الان لتحكم بتأثير

في التأثيرات يوجد 4 تأثيرات

لاضافت اي تأثير ضف هذا الى جانب الكلاس مثال   class='btnabdoutech23 icon-download btnabdoutech23--shake'

• انتا غير btnabdoutech23--shake الجزء الذي ب الاحمر
•  {btnabdoutech23--{ اسم التأثير
• اسماء التأثيرات flip, rotate, rubber , shake

3- الان لتحكم في الخلفيات

في الخلفيات يوجد 5 خلفيات ويمكنك تغييرهم بوضع رابط الصورة فقط في المكان الذي حددته لك في اول الموضوع

لاضافت اي خلفية ضف هذا جانب الكلاس  مثال  class='btnabdoutech23 icon-download btnabdoutech23--shake btnabdoutech23--cover1'

• لتغيير الخلفيات انتا تجدهم مرقمين cover1 cover 2 cover3 cover4 cover5 
• انتا غيرهم كما تريد

وان اعجبك احد ازرار التي في المعاينة يمكنك اخذه ونسخه 

<a class="btnabdoutech23 btnabdoutech23--flip icon-open" href="http://www.abdoutech.com/">تأثير 1</a><a class="btnabdoutech23 btnabdoutech23--rotate icon-open" href="http://www.abdoutech.com/">تأثير 2</a><a class="btnabdoutech23 btnabdoutech23--rubber icon-open" href="http://www.abdoutech.com/">تأثير 3</a><a class="btnabdoutech23 btnabdoutech23--shake icon-open" href="http://www.abdoutech.com/">تأثير 4</a> <a class="btnabdoutech23 icon-download" href="http://www.abdoutech.com/">تحميل مباشر</a><a class="btnabdoutech23 icon-cloud" href="http://www.abdoutech.com/">تحميل إلى السحابة</a><a class="btnabdoutech23 icon-open" href="http://www.abdoutech.com/">علامة تبويب جديدة</a><a class="btnabdoutech23 icon-clip" href="http://www.abdoutech.com/">مستند</a><a class="btnabdoutech23 icon-link" href="http://www.abdoutech.com/">فتح الرابط</a><a class="btnabdoutech23 icon-zip" href="http://www.abdoutech.com/">ملف مضغوط</a> <a class="btnabdoutech23 btnabdoutech23--cyan icon-open" href="http://www.abdoutech.com/">سماوي اللون</a><a class="btnabdoutech23 btnabdoutech23--red icon-open" href="http://www.abdoutech.com/">لون احمر</a><a class="btnabdoutech23 btnabdoutech23--green icon-open" href="http://www.abdoutech.com/">الون الاخضر</a><a class="btnabdoutech23 btnabdoutech23--amber icon-open" href="http://www.abdoutech.com/">لون الاصفر</a><a class="btnabdoutech23 btnabdoutech23--purple icon-open" href="http://www.abdoutech.com/">اللون البنفسجي</a><a class="btnabdoutech23 btnabdoutech23--indigo icon-open" href="http://www.abdoutech.com/">اللون النيلي</a><a class="btnabdoutech23 btnabdoutech23--teal icon-open" href="http://www.abdoutech.com/">لون البط البري</a> <a class="btnabdoutech23 btnabdoutech23--rubber btnabdoutech23--purple btnabdoutech23--cover1 icon-zip" href="http://www.abdoutech.com/">ملف مضغوط</a><a class="btnabdoutech23 btnabdoutech23--shake btnabdoutech23--green btnabdoutech23--cover2 icon-cloud" href="http://www.abdoutech.com/">تحميل إلى السحابة</a><a class="btnabdoutech23 btnabdoutech23--rotate btnabdoutech23--indigo btnabdoutech23--cover4 icon-clip" href="http://www.abdoutech.com/">قراءة المستندات</a><a class="btnabdoutech23 btnabdoutech23--flip btnabdoutech23--teal btnabdoutech23--cover5 icon-link" href="http://www.abdoutech.com/">فتح الرابط</a>

الان نصل الى نهاية الشرح لذا اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد

شارك هذا