-->

إضافة الأزرار بتقنية CSS3 تصلح ان تكون قائمة للمدونة

:
:
إضافة الأزرار بتقنية CSS3 تصلح ان تكون قائمة للمدونة

     بسم الله الرحمن الرحيم

     كما عودناكم اعضاء وزوار مدونة انتا الكسبان ان نقوم بأضافة كل ما هو جديد أقدم لكم بعض التقنيات العجيبة التي ستذهلكم إضافة الأزرار الملونة و الديناميكية بعض أزرار على شكل فقاعة متحركة باستخدام CSS3 لقالب بلوجر . وتتميز هذه الفقاعة أزرار CSS3 عند مرور الماوس فوقها تصدر فقاعات تهتز ويجعل هذا التأثير أكثر من رائع ، متوفر في أربعة ألوان المواضيع وثلاثة أحجام بحيث يمكنك إضافة أي زر من أي حجم فقط فقط عن طريق تغيير اسم فئة من زر.


    كيفية إضافة أزرار متحركة فقاعة CSS3 إلى Blogger

    طريقة تركيب الأزرار بسيطة للغاية تنقسم الى جزئين.
    الجزء الأول CSS
    الجزء الثاني HTML
    1. الآن مع الجزء الأول CSS.
    من لوح تحكم مدونتك توجه إلى صفحة "القالب"  ثم "تحرير HTML" و قبل أي تعديل احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

    ابحث عن ]]></b:skin> ثم قبله مباشرة أضف الكود الآتي :
    .button { font: 15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */ text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */ text-decoration: none !important; white-space: nowrap; display: inline-block; vertical-align: baseline; position: relative; cursor: pointer; padding: 10px 20px; background-repeat: no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */ background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position: bottom left, top right, 0 0, 0 0; background-clip: border-box; /* Applying a default border raidus of 8px */ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; /* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset; -webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset; /* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */ -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .button:hover { /* The first rule is a fallback, in case the browser does not support multiple backgrounds */ background-position: top left; background-position: top left, bottom right, 0 0, 0 0; } .button:active { /* Moving the button 1px to the bottom when clicked */ bottom: -1px; } /* The three buttons sizes */ .button.big { font-size: 30px; } .button.medium { font-size: 18px; } .button.small { font-size: 13px; } /* A more rounded button */ .button.rounded { -moz-border-radius: 4em; -webkit-border-radius: 4em; border-radius: 4em; } /* Defining four button colors */ /* BlueButton */ .blue.button { color: #0f4b6d !important; border: 1px solid #84acc3 !important; /* A fallback background color */ background-color: #48b5f2; /* Specifying a version with gradients according to */ background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover { background-color: #63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button { color: #345903 !important; border: 1px solid #96a37b !important; background-color: #79be1e; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover { background-color: #89d228; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button { color: #693e0a !important; border: 1px solid #bea280 !important; background-color: #e38d27; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover { background-color: #ec9732; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } .gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important; background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover { background-color: #b6bbc0; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa4GoV5QsYqxF7w9r7LvliFL99BFqpW8UJypbXCiqZg7T4pfuRPPvZuGfKh6gcYg_jcaQJZUSB-LQ1iOzlBfev3k_yB0ZoAsDWrUAPYXF1cpE7sJR_G5OwOpA9wg3CeSUoK3w1J8tckc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

    ثم قم بحفظ القالب ، الآن دمجنا جزء CSS في قالب دعونا نرى كيفية استخدامها.
    2. الآن مع الجزء الثاني HTML.
    طريقة إدخال الأزرار بسيطة للغاية ، فأثناء التدوين و بعد إنشاء رابط ما ، نُحول إلى الـHTML
    حيث ستجد أن رابطك عبارة عن عنصر <a> .
    و لجعل مظهره مثل الزر نضيف سمة التعريف بالكلاس بالقيم التالية :

    1.HTML لأزرار كبيرة الحجم (اختر أي كود وفقا للون الزر)

    <a href="LINK HERE" class="button big blue">TEXT HERE</a> <a href="LINK HERE" class="button big green">TEXT HERE</a> <a href="LINK HERE" class="button big orange">TEXT HERE</a> <a href="LINK HERE" class="button big gray">TEXT HERE</a>

    2.HTML لأزرار متوسطة الحجم (اختر أي كود وفقا للون الزر)

    <a href="LINK HERE" class="button blue medium">TEXT HERE</a> <a href="LINK HERE" class="button green medium">TEXT HERE</a> <a href="LINK HERE" class="button orange medium">TEXT HERE</a> <a href="LINK HERE" class="button gray medium">TEXT HERE</a>

    3.HTML لأزرار صغيرة الحجم (اختر أي كود وفقا للون الزر)

    <a href="LINK HERE" class="button small blue">TEXT HERE</a> <a href="LINK HERE" class="button small green">TEXT HERE</a> <a href="LINK HERE" class="button small orange">TEXT HERE</a> <a href="LINK HERE" class="button small gray">TEXT HERE</a>

    4.HTML لأزرار صغيرة الحجم مع زوايا مدورة (اختر أي كود وفقا للون الزر)

    <a href="LINK HERE" class="button small blue rounded">TEXT HERE</a> <a href="LINK HERE" class="button small green rounded">TEXT HERE</a> <a href="LINK HERE" class="button small orange rounded">TEXT HERE</a> <a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

    الآن شرح الكود:     "LINK HERE" استبدله برابط الصفحة واستبدل "TEXT HERE" بالنص الذي تريده أن يظهر على الزر الخاص بك.
    اذا عجبك الموضوع لا تحرمنا من الرد 
    Mohamed Shaban
    @مرسلة بواسطة
    كاتب ومحرر في مدونة : مدونة انتا الكسبان .

    آخر المشاركات

    تعليقات: 0

    إرسال تعليق