أزرار CSS خالصة مميزة و بخاصية ال rollover !

كل ما يهم مطور المواقع ... لغات برمجة المواقع .. سكربتات .. مناقشات ..
مغلق
DesignersColony
عضو جديد
مشاركات: 19
اشترك في: 22 مايو 2005, 17:45
اتصال:
اتصل بـ DesignersColony

أزرار CSS خالصة مميزة و بخاصية ال rollover !

مشاركة بواسطة DesignersColony »

السلام عليكم


دى طريقة عمل أزرار بال CSS الخالص، بدون جافاسكريبت ولا جرافيكس

لمشاهدة مثال:
http://www.designertoday.com/images/HOW ... llover.htm

الكود الذى نضعه فى ال head :

كود: تحديد الكل

<style type="text/css"> 
<!-- 
a.button { 
 font-weight: bold; 
 font-size: 9px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 padding: 4px 8px; 
 border-top: 1px solid white; 
 border-right: 1px solid black; 
 border-bottom: 1px solid black; 
 border-left: 1px solid white; 
 text-align: center; 
 min-width: 75px; 
 text-transform: uppercase; 
} 
a.button:link { 
 background-color: #800; 
 color: #FFF; 
 text-decoration: none; 
 } 
a.button:visited { 
 background-color: #800; 
 color: #FFF; 
 text-decoration: none; 
 } 
a.button:hover { 
 background-color: #800; 
 color: yellow; 
 border-color: black white white black; 
 text-decoration: none; 
 } 
a.button:active { 
 background-color: #369; 
 color: #ccc; 
 text-decoration: none; 
 } 
--> 
</style>





الكود الذى نضعه فى ال BODY لتحويل أى لينك عادى لزرار CSS:

كود: تحديد الكل

<a href="http://URL" class=button> أكتب هنا الكلمة التى ستظهر على الزرار </a>

يتميز بالسرعة و الأناقة و السهولة!
جربوه و قولولى رأيكم :)


تحياتى
أعلى
عبقر
عضو مفيد جداً
مشاركات: 417
اشترك في: 25 سبتمبر 2004, 03:28
مكان: MyPC

مشاركة بواسطة عبقر »

شكراً جزيلاً

جربتها ونفعت وفعلاً افضل من الجافا سكربت ولاتؤثر على الSEO ابداً :)

http://www.seo-browser.com/index.php?ad ... ple=Simple
أعلى
WEBPro
عضو نشيط
مشاركات: 190
اشترك في: 14 ديسمبر 2004, 14:45
مكان: WwW

مشاركة بواسطة WEBPro »

الف شكر ياباشا

الستايل شيت هذي بحر كبير وجميل :lol: ارجوك كثر لنا من هذه الحركات :)
أعلى
spy
عضو نشيط
مشاركات: 159
اشترك في: 22 سبتمبر 2004, 03:08
مكان: مصر ام الدنيا
اتصال:
اتصل بـ spy

مشاركة بواسطة spy »

بصراحة اعشق شيء اسمه CSS
امكانيات خياليه مع سهوله مطلقة ان شاء الله قريبا بتعلمها من الصفر :D

من مدة وانا ابحث عن برامج لعمل ازرار CSS جميله مثل الموجوده في هذا الموضوع
فهل اجد عندكم المزيد ؟؟؟
يوجد مثال جميل جدا ونفسي اعرف طريقته هل هي CSS ام DHTML
http://pxll.com/

ارجوا الافاده ومشكورين مقدما
أعلى
WebMaster
عضو نشيط
مشاركات: 287
اشترك في: 01 فبراير 2005, 08:59

مشاركة بواسطة WebMaster »

شكراً لك اخي
يوجد مثال جميل جدا ونفسي اعرف طريقته هل هي CSS ام DHTML
http://pxll.com/

فيها css وفيها جافا سكربت

شوف واحده كمثال

كود: تحديد الكل

<td bgcolor="#ffffff" class="td_1" onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" bordercolor="#D5D5D5" width="18%" align="center" height="20" style="border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-style: dotted; border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/vb"><span style="text-decoration: none">المنتديات</span></a></span></font></td>
ركز هنا

كود: تحديد الكل

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" bordercolor="#D5D5D5" width="18%" align="center" height="20" style="border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-style: dotted; border-bottom-width: 1px"
والاخ DesignersColony ممكن يفتينا :)
أعلى
DesignersColony
عضو جديد
مشاركات: 19
اشترك في: 22 مايو 2005, 17:45
اتصال:
اتصل بـ DesignersColony

مشاركة بواسطة DesignersColony »

أسعدنى تجاوبكم فعلا و الحمد لله انه عجبكم :)
شكرا على الردود، و إن شا الله إذا وجدت أكواد CSS أخرى حلوة حأعرضها لكم

أخى Spy
أظن الأخ web master عنده حق و آدى الكود:

كود: تحديد الكل


<div align="center">
  <center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 

collapse; font-size:9pt; font-family:Tahoma" bordercolor="#111111" 

id="AutoNumber1">
  <tr>
    <td width="700" align="center" bgcolor="#FFFFFF" colspan="2" height="14">
    <p style="margin-top: 0; margin-bottom: 0"> </p>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 

collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="100">
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#d5d5d5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p style="margin-top: 0; margin-bottom: 0" align="center">
        <font face="Tahoma" style="font-size: 9pt"><span lang="ar-sa">
		<a href="index.html">
		<span style="text-decoration: none">الصفحة 
		الرئيسية</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
         </td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/vb"><span 

style="text-decoration: none">المنتديات</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
         </td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="droos.html">
		<span style="text-decoration: none">الدروس 

التعليمية</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
         </td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/tasamem/">
        <span style="text-decoration: none">قسم 

التصاميم</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1" bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
         </td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="20%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="mailto:team@pxll.com">
		<span style="text-decoration: 

none">راسلنا</span></a></span></font></td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
		<a href="daleel/"><span style="text-decoration: none">دليل 
		المواقع</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
		<a href="color/"><span style="text-decoration: none">صندوق 
        الألوان</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
		<a href="serv/"><span style="text-decoration: 

none">خدماتنا</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
		<a href="js/"><span style="text-decoration: none">مكتبة 
        الصوتيات</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="20%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <a href="khatat/maktotat.html"><span style="font-size: 9pt; 

text-decoration: none">مكتبة 
        الخطاط</span></a></td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span style="font-size: 9pt"><a href="http://www.pxll.com/pxllicon">
        <span style="text-decoration: none">مكتبة الأيقونات</span></a></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
        <a href="team/index.html"><span style="text-decoration: none">صفحة 
        الفريق</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <font face="Tahoma" style="font-size: 9pt"><a href="java/">
		<span style="text-decoration: none">مكتبة 

الجافا</span></a></font></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span style="font-size: 9pt"><a href="adwat/index.html">
        <span style="text-decoration: none">مكتبة الأدوات</span></a></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff'; " 

bordercolor="#D5D5D5" width="18%" align="center" height="20"; 

style="border-left-width: 1px; align=center height=20; border-right-width: 

1px; border-bottom-style: dotted; border-bottom-width: 1px">
        <font face="Tahoma" style="font-size: 9pt"><a 

href="majalah/index.html">
        <span style="text-decoration: none">مجلة الموقع</span></a></font></td>
      </tr>
</table>



</div>

اتمنى يكون هو ده اللى انت محتاجه




تحياتى لكم جميعا :D
أعلى
jax113
عضو جديد
مشاركات: 13
اشترك في: 04 يونيو 2005, 16:46
مكان: hhh

مشاركة بواسطة jax113 »

جميل جدا
أعلى
مغلق

العودة إلى ”تطويــر الويــب“