في هدا الموضوع سأضع بين أيديكم أزرار جميلة ورائعة بجميع الأحجام والادواق وبتقنية css ,حيث نحتوي هده الأزرار على فقاقيع والأزرار طبعا ملونة وتعمل بخاصية الماوس هوفر حيث عند التأشير عليها تتحرك تلك الفقاعات عند التاشير عليها ,بالاضافة الى دالك هده الأزرار اتعمل بتقنية css فقط وهدا يجعلها خفيفة وسريعة الضهور في مدونتك
طريقة التركيب
]]></b:skin>
ثم ضع فوقه مباشرة هدا الكود
ثم قم بحفض القالب
عندما تهم بكتابة موضوع وتريد زر ما فقط اضغط على تبويب HTML ثم ضع أحد الاكواد .مثلا ادا أردت زر كبير يكفي فط وضع الكود الخاص به مع اختيار كود واحد حسب لون الزر
الان هده هي أكواد الأزرار من الأكبر الى الصغر
ملاحضة
لا تضع الكود فقط اختر كود زر حسب لونه وقد بينت كل كود ولونه
الأزرار دات الحجم الصغير والدائرية الحواف(اختر الزر حسب لونه )
اختر ما تريد
ولا تنسى تغير رابط بأي رابط تريد أن يتم التحويل له مثلا وأيضا لاتنسى تغير ضع جملتك هنا بالجملة التي ستضهر على الزر دي الفقاقيع المتحركة
ومبروك عليك الازرار
مصدر الأزرار
طريقة التركيب
ثم قم بالضغط على ctrl + f ثم قم بالبحث على الكود التالي
]]></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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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));
}
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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmyrX9h-FxEIgEvFiBMaKWBz1slLQ1hefD5Hy35DX0OdSGbpQ-fKuONTG5McfVk9KLamuTmbAM0r7Ajf_mjW7uve2roB8sjPiIC73oXbuNb1eE-F5vFLte0rLkfLNBaV5GY31-vcr-v4/s1600/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));
}
ثم قم بحفض القالب
- طريقة اضاهر الأزرار
عندما تهم بكتابة موضوع وتريد زر ما فقط اضغط على تبويب HTML ثم ضع أحد الاكواد .مثلا ادا أردت زر كبير يكفي فط وضع الكود الخاص به مع اختيار كود واحد حسب لون الزر
الان هده هي أكواد الأزرار من الأكبر الى الصغر
- الأزرار دات الحجم الكبير(اختر الزر حسب لونه )
<a href="رابط " class="button big blue">ضع جملتك هنا</a>
<a href="رابط " class="button big green">ضع جملتك هنا</a>
<a href="رابط" class="button big orange">ضع جملتك هنا</a>
<a href="رابط " class="button big gray">ضع جملتك هنا</a>
<a href="رابط " class="button big green">ضع جملتك هنا</a>
<a href="رابط" class="button big orange">ضع جملتك هنا</a>
<a href="رابط " class="button big gray">ضع جملتك هنا</a>
ملاحضة
لا تضع الكود فقط اختر كود زر حسب لونه وقد بينت كل كود ولونه
- الأزرار دات الحجم المتوسط(اختر الزر حسب لونه )
<a href="رابط" class="button blue medium">ضع جملتك هنا</a>
<a href="رابط" class="button green medium">ضع جملتك هنا</a>
<a href="رابط" class="button orange medium">ضع جملتك هنا</a>
<a href="رابط " class="button gray medium">ضع جملتك هنا</a>
<a href="رابط" class="button green medium">ضع جملتك هنا</a>
<a href="رابط" class="button orange medium">ضع جملتك هنا</a>
<a href="رابط " class="button gray medium">ضع جملتك هنا</a>
- الأزرار دات الحجم الصغير (اختر الزر حسب لونه )
<a href="رابط " class="button small blue">ضع جملتك هنا</a>
<a href="رابط " class="button small green">ضع جملتك هنا</a>
<a href="رابط " class="button small orange">ضع جملتك هنا</a>
<a href="رابط" class="button small gray">ضع جملتك هنا</a>
<a href="رابط " class="button small green">ضع جملتك هنا</a>
<a href="رابط " class="button small orange">ضع جملتك هنا</a>
<a href="رابط" class="button small gray">ضع جملتك هنا</a>
الأزرار دات الحجم الصغير والدائرية الحواف(اختر الزر حسب لونه )
<a href="رابط" class="button small blue rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small green rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small orange rounded">ضع جملتك هنا</a>
<a href="رابط " class="button small gray rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small green rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small orange rounded">ضع جملتك هنا</a>
<a href="رابط " class="button small gray rounded">ضع جملتك هنا</a>
اختر ما تريد
ولا تنسى تغير رابط بأي رابط تريد أن يتم التحويل له مثلا وأيضا لاتنسى تغير ضع جملتك هنا بالجملة التي ستضهر على الزر دي الفقاقيع المتحركة
ومبروك عليك الازرار
مصدر الأزرار
3 التعليقات:
اضافة جميلة اخي حسام شكرا لك
@تدوين باحتراف
لا شكرا على واجب أخي
امين يارب العلمين,بارك الله فيك أخي
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.