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

Admin Amer

أبريل 28, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

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

<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 ايقونات في المثال توجد ايقونة الداون لود

هنا اسم الملف او الرابط

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

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/04/10.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/04/10.html">اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>